Feat(web): Switch Tooltip component to v3 design tokens #DS-1451

packages/web/src/scss/components/Tooltip/_theme.scss

@@ -1,23 +1,24 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
 @use '../../settings/dictionaries';
+@use '../../settings/globals';
 @use '../../settings/transitions';
 
 $max-width: 288px;
-$typography: tokens.$body-medium-text-regular;
-$padding: tokens.$space-500 tokens.$space-600;
-$gap: tokens.$space-500;
-$border-radius: tokens.$radius-100;
-$color: tokens.$text-primary-inverted-default;
-$background-color: tokens.$background-inverted;
-$box-shadow: tokens.$shadow-400;
+$typography: global-tokens.$body-medium-regular;
+$padding: global-tokens.$space-600 global-tokens.$space-700;
+$gap: global-tokens.$space-600;
+$border-radius: global-tokens.$radius-300;
+$color: var(--#{globals.$prefix}color-neutral-content-subtle);
+$background-color: var(--#{globals.$prefix}color-neutral-background-basic);
+$box-shadow: global-tokens.$shadow-400;
 $transition-duration: transitions.$duration-200;
 $transition-scale-ratio: transitions.$scale-ratio-small-objects;
 
-$arrow-shape: url('data:image/svg+xml,<svg width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path fill="#{$background-color}" d="M4.915,2.054c0.801,-1.04 2.369,-1.04 3.17,-0l9.793,12.721c1.012,1.315 0.074,3.22 -1.585,3.22l-19.586,-0c-1.66,-0 -2.597,-1.905 -1.585,-3.22l9.793,-12.721Z" /></svg>');
+$arrow-shape: var(--#{globals.$prefix}tooltip-arrow-background-image-url);
 $arrow-width: 13px;
 $arrow-height: 8px;
-$arrow-corner-offset: tokens.$space-500;
+$arrow-corner-offset: global-tokens.$space-600;
 
-$close-button-size: tokens.$space-700;
+$close-button-size: global-tokens.$space-900;
 
 $placement-dictionary: dictionaries.$placement;

packages/web/src/scss/components/Tooltip/index.html

@@ -410,8 +410,8 @@ <h2 class="docs-Heading">Placements</h2>
           </div>
           <div class="GridItem" style="--grid-item-column-start: 2; --grid-item-row-start: 2">
 
-            <div class="Tooltip" style="margin: 5rem auto" data-spirit-element="tooltip">
-              <div class="docs-Box px-900 py-900" >
+            <div class="Tooltip mx-auto my-1600" data-spirit-element="tooltip">
+              <div class="docs-Box px-1100 py-1100" >
                 Click<br />
                 the dots!
               </div>
@@ -453,13 +453,13 @@ <h2 class="docs-Heading">Advanced Floating Functionality</h2>
         }
       </style>
 
-      <p class="mb-600">
+      <p class="mb-700">
         Try scrolling the frame or resizing the window to see how the Tooltip behaves. The Floating UI
         library is trying to keep the Tooltip in the viewport and it is also flipping, shifting and
         resizing the Tooltip when it is not possible to keep it in the viewport.
       </p>
 
-      <div class="Grid Grid--cols-1 Grid--tablet--cols-4 mb-600">
+      <div class="Grid Grid--cols-1 Grid--tablet--cols-4 mb-700">
         <div>
           <label for="my-advanced-flip" class="Checkbox">
             <input type="checkbox" id="my-advanced-flip" class="Checkbox__input" name="advanced-flip" checked />
@@ -493,7 +493,7 @@ <h2 class="docs-Heading">Advanced Floating Functionality</h2>
           </label>
         </div>
       </div>
-      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 mb-600">
+      <div class="Grid Grid--cols-1 Grid--tablet--cols-2 mb-700">
         <div class="Select">
           <label for="my-advanced-select" class="Select__label">Suggested placement</label>
           <div class="Select__inputContainer">

packages/web/src/scss/components/index.scss

@@ -33,7 +33,7 @@
 // @forward 'TextArea';
 // @forward 'TextField';
 // @forward 'Toast';
-// @forward 'Tooltip';
+@forward 'Tooltip';
 @forward 'UNSTABLE_ActionLayout';
 @forward 'UNSTABLE_Avatar';
 @forward 'UNSTABLE_EmptyState';