From 5b57f27aa9efe52c2c20e48e7a0e6609eedf13fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Tue, 3 Sep 2024 08:44:57 +0200
Subject: [PATCH] Feat(web): Switch Tooltip component to v3 design tokens
 #DS-1451

---
 .../src/scss/components/Tooltip/_theme.scss   | 23 ++++++++++---------
 .../src/scss/components/Tooltip/index.html    | 10 ++++----
 packages/web/src/scss/components/index.scss   |  2 +-
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/web/src/scss/components/Tooltip/_theme.scss b/packages/web/src/scss/components/Tooltip/_theme.scss
index 59ff9d1bed..d43b28e5db 100644
--- a/packages/web/src/scss/components/Tooltip/_theme.scss
+++ b/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;
diff --git a/packages/web/src/scss/components/Tooltip/index.html b/packages/web/src/scss/components/Tooltip/index.html
index d80aa805db..d2a1b862fd 100644
--- a/packages/web/src/scss/components/Tooltip/index.html
+++ b/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">
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
index e559d4541c..b2ba0eaece 100644
--- a/packages/web/src/scss/components/index.scss
+++ b/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';