🎨(react) enhance Tooltip component styles

update Tooltip token and css files with new css variables introduce
with the new tokens architectures

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;

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>,

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",

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"],
+    "background-color": defaults.contextuals.background.semantic.neutral.secondary,
-    color: defaults.theme.colors["greyscale-000"],
+    "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
-    "font-size": defaults.theme.font.sizes.s,
+    color: defaults.contextuals.content.semantic.neutral.secondary,
+    "font-size": defaults.globals.font.sizes.s,
     padding: "1rem",
     "max-width": "150px",
   };