fix(tooltip,styles): use latest CSS (#5349)

Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

Co-authored-by: castastrophe <[email protected]>
Co-authored-by: Casey Eickhoff <[email protected]>

Author: 3 people

.changeset/stale-candies-camp.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/tooltip': patch
+---
+
+Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

packages/tooltip/package.json

@@ -74,7 +74,7 @@
         "@spectrum-web-components/shared": "1.5.0"
     },
     "devDependencies": {
-        "@spectrum-css/tooltip": "7.0.0-s2-foundations.15"
+        "@spectrum-css/tooltip": "7.1.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/tooltip/src/spectrum-tooltip.css

@@ -33,6 +33,37 @@ governing permissions and limitations under the License.
     transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s));
 }
 
+#tooltip {
+    --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100);
+    --spectrum-tooltip-margin: 0px;
+    --spectrum-tooltip-height: var(--spectrum-component-height-75);
+    --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
+    --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100);
+    --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
+    --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
+    --spectrum-tooltip-font-size: var(--spectrum-font-size-75);
+    --spectrum-tooltip-line-height: var(--spectrum-line-height-100);
+    --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
+    --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight);
+    --spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);
+    --spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75);
+    --spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75);
+    --spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75);
+    --spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
+    --spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
+    --spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default);
+    --spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default);
+    --spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default);
+    --spectrum-tooltip-content-color: var(--spectrum-white);
+    --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
+    --spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
+    --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size);
+    --spectrum-tooltip-tip-height-percentage: 50%;
+    --spectrum-tooltip-tip-antialiasing-inset: 0.5px;
+    --spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
+    --spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral);
+}
+
 @media (forced-colors: active) {
     #tooltip {
         border: 1px solid #0000;

packages/tooltip/src/tooltip-overrides.css

@@ -15,58 +15,4 @@ governing permissions and limitations under the License.
     --spectrum-tooltip-backgound-color-default-neutral: var(
         --system-tooltip-backgound-color-default-neutral
     );
-    --spectrum-tooltip-animation-duration: var(
-        --system-tooltip-animation-duration
-    );
-    --spectrum-tooltip-margin: var(--system-tooltip-margin);
-    --spectrum-tooltip-height: var(--system-tooltip-height);
-    --spectrum-tooltip-max-inline-size: var(--system-tooltip-max-inline-size);
-    --spectrum-tooltip-border-radius: var(--system-tooltip-border-radius);
-    --spectrum-tooltip-icon-width: var(--system-tooltip-icon-width);
-    --spectrum-tooltip-icon-height: var(--system-tooltip-icon-height);
-    --spectrum-tooltip-font-size: var(--system-tooltip-font-size);
-    --spectrum-tooltip-line-height: var(--system-tooltip-line-height);
-    --spectrum-tooltip-cjk-line-height: var(--system-tooltip-cjk-line-height);
-    --spectrum-tooltip-font-weight: var(--system-tooltip-font-weight);
-    --spectrum-tooltip-spacing-inline: var(--system-tooltip-spacing-inline);
-    --spectrum-tooltip-spacing-block-start: var(
-        --system-tooltip-spacing-block-start
-    );
-    --spectrum-tooltip-spacing-block-end: var(
-        --system-tooltip-spacing-block-end
-    );
-    --spectrum-tooltip-icon-spacing-inline-start: var(
-        --system-tooltip-icon-spacing-inline-start
-    );
-    --spectrum-tooltip-icon-spacing-inline-end: var(
-        --system-tooltip-icon-spacing-inline-end
-    );
-    --spectrum-tooltip-icon-spacing-block-start: var(
-        --system-tooltip-icon-spacing-block-start
-    );
-    --spectrum-tooltip-background-color-informative: var(
-        --system-tooltip-background-color-informative
-    );
-    --spectrum-tooltip-background-color-positive: var(
-        --system-tooltip-background-color-positive
-    );
-    --spectrum-tooltip-background-color-negative: var(
-        --system-tooltip-background-color-negative
-    );
-    --spectrum-tooltip-content-color: var(--system-tooltip-content-color);
-    --spectrum-tooltip-tip-inline-size: var(--system-tooltip-tip-inline-size);
-    --spectrum-tooltip-tip-block-size: var(--system-tooltip-tip-block-size);
-    --spectrum-tooltip-tip-square-size: var(--system-tooltip-tip-square-size);
-    --spectrum-tooltip-tip-height-percentage: var(
-        --system-tooltip-tip-height-percentage
-    );
-    --spectrum-tooltip-tip-antialiasing-inset: var(
-        --system-tooltip-tip-antialiasing-inset
-    );
-    --spectrum-tooltip-pointer-corner-spacing: var(
-        --system-tooltip-pointer-corner-spacing
-    );
-    --spectrum-tooltip-background-color-default: var(
-        --system-tooltip-background-color-default
-    );
 }

tools/styles/tokens-v2/system-theme-bridge.css

@@ -2407,50 +2407,6 @@
     --system-tooltip-backgound-color-default-neutral: var(
         --spectrum-neutral-subdued-background-color-default
     );
-    --system-tooltip-animation-duration: var(--spectrum-animation-duration-100);
-    --system-tooltip-margin: 0px;
-    --system-tooltip-height: var(--spectrum-component-height-75);
-    --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
-    --system-tooltip-border-radius: var(--spectrum-corner-radius-100);
-    --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
-    --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
-    --system-tooltip-font-size: var(--spectrum-font-size-75);
-    --system-tooltip-line-height: var(--spectrum-line-height-100);
-    --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
-    --system-tooltip-font-weight: var(--spectrum-regular-font-weight);
-    --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);
-    --system-tooltip-spacing-block-start: var(
-        --spectrum-component-top-to-text-75
-    );
-    --system-tooltip-spacing-block-end: var(
-        --spectrum-component-bottom-to-text-75
-    );
-    --system-tooltip-icon-spacing-inline-start: var(
-        --spectrum-text-to-visual-75
-    );
-    --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
-    --system-tooltip-icon-spacing-block-start: var(
-        --spectrum-component-top-to-workflow-icon-75
-    );
-    --system-tooltip-background-color-informative: var(
-        --spectrum-informative-background-color-default
-    );
-    --system-tooltip-background-color-positive: var(
-        --spectrum-positive-background-color-default
-    );
-    --system-tooltip-background-color-negative: var(
-        --spectrum-negative-background-color-default
-    );
-    --system-tooltip-content-color: var(--spectrum-white);
-    --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
-    --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
-    --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size);
-    --system-tooltip-tip-height-percentage: 50%;
-    --system-tooltip-tip-antialiasing-inset: 0.5px;
-    --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
-    --system-tooltip-background-color-default: var(
-        --system-tooltip-backgound-color-default-neutral
-    );
     --system-heading-sans-serif-font-family: var(
         --spectrum-sans-font-family-stack
     );

tools/styles/tokens/express/system-theme-bridge.css

@@ -2416,50 +2416,6 @@
     --system-tooltip-backgound-color-default-neutral: var(
         --spectrum-neutral-background-color-default
     );
-    --system-tooltip-animation-duration: var(--spectrum-animation-duration-100);
-    --system-tooltip-margin: 0px;
-    --system-tooltip-height: var(--spectrum-component-height-75);
-    --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
-    --system-tooltip-border-radius: var(--spectrum-corner-radius-100);
-    --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
-    --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
-    --system-tooltip-font-size: var(--spectrum-font-size-75);
-    --system-tooltip-line-height: var(--spectrum-line-height-100);
-    --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
-    --system-tooltip-font-weight: var(--spectrum-regular-font-weight);
-    --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);
-    --system-tooltip-spacing-block-start: var(
-        --spectrum-component-top-to-text-75
-    );
-    --system-tooltip-spacing-block-end: var(
-        --spectrum-component-bottom-to-text-75
-    );
-    --system-tooltip-icon-spacing-inline-start: var(
-        --spectrum-text-to-visual-75
-    );
-    --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
-    --system-tooltip-icon-spacing-block-start: var(
-        --spectrum-component-top-to-workflow-icon-75
-    );
-    --system-tooltip-background-color-informative: var(
-        --spectrum-informative-background-color-default
-    );
-    --system-tooltip-background-color-positive: var(
-        --spectrum-positive-background-color-default
-    );
-    --system-tooltip-background-color-negative: var(
-        --spectrum-negative-background-color-default
-    );
-    --system-tooltip-content-color: var(--spectrum-white);
-    --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
-    --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
-    --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size);
-    --system-tooltip-tip-height-percentage: 50%;
-    --system-tooltip-tip-antialiasing-inset: 0.5px;
-    --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
-    --system-tooltip-background-color-default: var(
-        --system-tooltip-backgound-color-default-neutral
-    );
     --system-heading-sans-serif-font-family: var(
         --spectrum-sans-font-family-stack
     );

tools/styles/tokens/spectrum/system-theme-bridge.css

@@ -2420,50 +2420,6 @@
     --system-tooltip-backgound-color-default-neutral: var(
         --spectrum-neutral-subdued-background-color-default
     );
-    --system-tooltip-animation-duration: var(--spectrum-animation-duration-100);
-    --system-tooltip-margin: 0px;
-    --system-tooltip-height: var(--spectrum-component-height-75);
-    --system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
-    --system-tooltip-border-radius: var(--spectrum-corner-radius-100);
-    --system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
-    --system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
-    --system-tooltip-font-size: var(--spectrum-font-size-75);
-    --system-tooltip-line-height: var(--spectrum-line-height-100);
-    --system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
-    --system-tooltip-font-weight: var(--spectrum-regular-font-weight);
-    --system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);
-    --system-tooltip-spacing-block-start: var(
-        --spectrum-component-top-to-text-75
-    );
-    --system-tooltip-spacing-block-end: var(
-        --spectrum-component-bottom-to-text-75
-    );
-    --system-tooltip-icon-spacing-inline-start: var(
-        --spectrum-text-to-visual-75
-    );
-    --system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
-    --system-tooltip-icon-spacing-block-start: var(
-        --spectrum-component-top-to-workflow-icon-75
-    );
-    --system-tooltip-background-color-informative: var(
-        --spectrum-informative-background-color-default
-    );
-    --system-tooltip-background-color-positive: var(
-        --spectrum-positive-background-color-default
-    );
-    --system-tooltip-background-color-negative: var(
-        --spectrum-negative-background-color-default
-    );
-    --system-tooltip-content-color: var(--spectrum-white);
-    --system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
-    --system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
-    --system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size);
-    --system-tooltip-tip-height-percentage: 50%;
-    --system-tooltip-tip-antialiasing-inset: 0.5px;
-    --system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
-    --system-tooltip-background-color-default: var(
-        --system-tooltip-backgound-color-default-neutral
-    );
     --system-heading-sans-serif-font-family: var(
         --spectrum-sans-font-family-stack
     );

yarn.lock

@@ -7777,13 +7777,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@spectrum-css/tooltip@npm:7.0.0-s2-foundations.15":
-  version: 7.0.0-s2-foundations.15
-  resolution: "@spectrum-css/tooltip@npm:7.0.0-s2-foundations.15"
+"@spectrum-css/tooltip@npm:7.1.0":
+  version: 7.1.0
+  resolution: "@spectrum-css/tooltip@npm:7.1.0"
   peerDependencies:
-    "@spectrum-css/icon": ">=7"
-    "@spectrum-css/tokens": ">=14"
-  checksum: 10c0/9ff18b52abba9eed53507869c777e85bdfc78e0fe4a99cbe639538c9ed8434f7e2e1b1af725396bd3c6bbd5067b1196c644e31e2b613c874350cef2f8133e977
+    "@spectrum-css/icon": ">=9.0.0 <10.0.0"
+    "@spectrum-css/tokens": ">=16.0.0 <17.0.0"
+  peerDependenciesMeta:
+    "@spectrum-css/icon":
+      optional: true
+    "@spectrum-css/tokens":
+      optional: true
+  checksum: 10c0/96541bbe65300a4f0d7c0696424ac8f1dbe6f7f58a8a912cb9c62bd5599496c33ffdb8b343db6cbd8bd6141655b5061de8db7b90b8f990cb96dd047a6c8665cc
   languageName: node
   linkType: hard
 
@@ -8879,7 +8884,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@spectrum-web-components/tooltip@workspace:packages/tooltip"
   dependencies:
-    "@spectrum-css/tooltip": "npm:7.0.0-s2-foundations.15"
+    "@spectrum-css/tooltip": "npm:7.1.0"
     "@spectrum-web-components/base": "npm:1.5.0"
     "@spectrum-web-components/overlay": "npm:1.5.0"
     "@spectrum-web-components/reactive-controllers": "npm:1.5.0"