From 3e4da2f95a4ecada2431fab22c1defe7b8753734 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Fri, 22 Aug 2025 10:16:14 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(react)=20enhance=20Tooltip=20compo?=
 =?UTF-8?q?nent=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

update Tooltip token and css files with new css variables introduce
with the new tokens architectures
---
 packages/react/src/components/Tooltip/_index.scss  |  2 ++
 .../react/src/components/Tooltip/index.spec.tsx    | 10 +++++-----
 .../react/src/components/Tooltip/index.stories.tsx | 14 ++++++++------
 packages/react/src/components/Tooltip/tokens.ts    |  7 ++++---
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/Tooltip/_index.scss b/packages/react/src/components/Tooltip/_index.scss
index e90588c..1cc2988 100644
--- a/packages/react/src/components/Tooltip/_index.scss
+++ b/packages/react/src/components/Tooltip/_index.scss
@@ -5,6 +5,8 @@
   font-size: var(--c--components--tooltip--font-size);
   forced-color-adjust: none;
   outline: none;
+  box-shadow: 0 1px 5.4px 0 rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--c--components--tooltip--border-color);
   padding: var(--c--components--tooltip--padding);
   max-width: var(--c--components--tooltip--max-width);
   display: flex;
diff --git a/packages/react/src/components/Tooltip/index.spec.tsx b/packages/react/src/components/Tooltip/index.spec.tsx
index 324575c..cbef0fc 100644
--- a/packages/react/src/components/Tooltip/index.spec.tsx
+++ b/packages/react/src/components/Tooltip/index.spec.tsx
@@ -14,7 +14,7 @@ describe("<Tooltip />", () => {
   it("appear on button hover and then disappear", async () => {
     render(
       <Tooltip content="Hi there" closeDelay={0}>
-        <Button size="nano" color="tertiary-text">
+        <Button size="nano" color="tertiary">
           ⬅️
         </Button>
       </Tooltip>,
@@ -33,7 +33,7 @@ describe("<Tooltip />", () => {
   it("appear on button focus and then disappear", async () => {
     render(
       <Tooltip content="Hi there" closeDelay={0}>
-        <Button size="nano" color="tertiary-text">
+        <Button size="nano" color="tertiary">
           ⬅️
         </Button>
       </Tooltip>,
@@ -51,7 +51,7 @@ describe("<Tooltip />", () => {
   it("sets entering and exiting class", async () => {
     render(
       <Tooltip content="Hi there" closeDelay={0}>
-        <Button size="nano" color="tertiary-text">
+        <Button size="nano" color="tertiary">
           ⬅️
         </Button>
       </Tooltip>,
@@ -102,7 +102,7 @@ describe("<Tooltip />", () => {
         }
         closeDelay={0}
       >
-        <Button size="nano" color="tertiary-text">
+        <Button size="nano" color="tertiary">
           ⬅️
         </Button>
       </Tooltip>,
@@ -128,7 +128,7 @@ describe("<Tooltip />", () => {
         closeDelay={0}
         className="my-custom-class"
       >
-        <Button size="nano" color="tertiary-text">
+        <Button size="nano" color="tertiary">
           ⬅️
         </Button>
       </Tooltip>,
diff --git a/packages/react/src/components/Tooltip/index.stories.tsx b/packages/react/src/components/Tooltip/index.stories.tsx
index 64cd41b..dfb50d7 100644
--- a/packages/react/src/components/Tooltip/index.stories.tsx
+++ b/packages/react/src/components/Tooltip/index.stories.tsx
@@ -26,7 +26,8 @@ export const Default = {
       <Button
         size="small"
         icon={<span className="material-icons">info</span>}
-        color="tertiary-text"
+        color="tertiary"
+        variant="neutral"
       />
     ),
     content:
@@ -39,22 +40,22 @@ export const Placements = {
     return (
       <div>
         <Tooltip placement="left" content="Hi there">
-          <Button size="nano" color="tertiary-text">
+          <Button size="nano" color="tertiary" variant="neutral">
             ⬅️
           </Button>
         </Tooltip>
         <Tooltip placement="bottom" content="Hi there">
-          <Button size="nano" color="tertiary-text">
+          <Button size="nano" color="tertiary" variant="neutral">
             ⬇️
           </Button>
         </Tooltip>
         <Tooltip placement="top" content="Hi there">
-          <Button size="nano" color="tertiary-text">
+          <Button size="nano" color="tertiary" variant="neutral">
             ⬆️
           </Button>
         </Tooltip>
         <Tooltip placement="right" content="Hi there">
-          <Button size="nano" color="tertiary-text">
+          <Button size="nano" color="tertiary" variant="neutral">
             ➡️
           </Button>
         </Tooltip>
@@ -130,7 +131,8 @@ export const WithHtml = {
       <Button
         size="small"
         icon={<span className="material-icons">info</span>}
-        color="tertiary-text"
+        color="tertiary"
+        variant="neutral"
       />
     ),
     placement: "right",
diff --git a/packages/react/src/components/Tooltip/tokens.ts b/packages/react/src/components/Tooltip/tokens.ts
index 609ebe8..3ac330a 100644
--- a/packages/react/src/components/Tooltip/tokens.ts
+++ b/packages/react/src/components/Tooltip/tokens.ts
@@ -3,9 +3,10 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
 export const tokens = (defaults: DefaultTokens) => {
   return {
     "border-radius": "0.5rem",
-    "background-color": defaults.theme.colors["greyscale-900"],
-    color: defaults.theme.colors["greyscale-000"],
-    "font-size": defaults.theme.font.sizes.s,
+    "background-color": defaults.contextuals.background.semantic.neutral.secondary,
+    "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
+    color: defaults.contextuals.content.semantic.neutral.secondary,
+    "font-size": defaults.globals.font.sizes.s,
     padding: "1rem",
     "max-width": "150px",
   };