[Darkside]: Added darkmode-support to Tooltip (#3442)

navikt · Dec 11, 2024 · f7452d5 · f7452d5
1 parent 04e65c7
commit f7452d5
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 59 deletions.
diff --git a/@navikt/core/css/darkside/tooltip.darkside.css b/@navikt/core/css/darkside/tooltip.darkside.css
@@ -1,81 +1,106 @@
-@keyframes tooltipFadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
 .navds-tooltip {
-  z-index: var(--a-z-index-tooltip);
-  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
-  color: var(--ac-tooltip-text, var(--a-text-on-inverted));
-  border-radius: var(--a-border-radius-small);
-  padding: 0 var(--a-spacing-2);
+  z-index: 3000;
+  background-color: var(--ax-bg-raised);
+  color: var(--ax-text-default);
+  border-radius: var(--ax-border-radius-medium);
+  padding: 0 var(--ax-spacing-1-alt);
   align-items: center;
-  filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
   display: flex;
   flex-direction: column;
-  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  animation-duration: 0.2s;
-  animation-name: tooltipFadeIn;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-duration: 150ms;
   text-align: center;
+  border: 1px solid var(--ax-border-subtleA);
+  box-shadow: var(--ax-shadow-dialog);
 }
 
-.navds-tooltip__arrow {
-  height: 0.4375rem;
-  width: 0.4375rem;
-  transform: rotate(45deg);
-  z-index: -1;
-  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
-  position: absolute;
+.navds-tooltip:where([data-state="open"]):where([data-side="bottom"]) {
+  animation-name: aksel-tooltip-from-bottom, aksel-tooltip-fade-in;
 }
 
-.navds-tooltip__keys {
-  padding-bottom: var(--a-spacing-1);
-  display: flex;
-  gap: var(--a-spacing-1);
+.navds-tooltip:where([data-state="open"]):where([data-side="top"]) {
+  animation-name: aksel-tooltip-from-top, aksel-tooltip-fade-in;
 }
 
-.navds-tooltip__key {
-  font-family: var(--a-font-family);
-  background-color: var(--ac-tooltip-key-bg, var(--a-surface-neutral));
-  color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
-  border-radius: var(--a-border-radius-small);
-  padding: 0 var(--a-spacing-1);
-  min-width: 1.125rem;
-  height: 1.125rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.navds-tooltip:where([data-state="open"]):where([data-side="left"]) {
+  animation-name: aksel-tooltip-from-left, aksel-tooltip-fade-in;
+}
+
+.navds-tooltip:where([data-state="open"]):where([data-side="right"]) {
+  animation-name: aksel-tooltip-from-right, aksel-tooltip-fade-in;
+}
+
+@keyframes aksel-tooltip-from-bottom {
+  from {
+    transform: translateY(-4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes aksel-tooltip-from-top {
+  from {
+    transform: translateY(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
 }
 
-@media (forced-colors: active) {
-  .navds-tooltip {
-    --__a-tooltip-high-contrast-border: 1px solid transparent;
+@keyframes aksel-tooltip-from-left {
+  from {
+    transform: translateX(4px);
+  }
 
-    border: var(--__a-tooltip-high-contrast-border);
+  to {
+    transform: translateY(0);
   }
+}
 
-  .navds-tooltip[data-side="top"] .navds-tooltip__arrow {
-    border-bottom: var(--__a-tooltip-high-contrast-border);
-    border-right: var(--__a-tooltip-high-contrast-border);
+@keyframes aksel-tooltip-from-right {
+  from {
+    transform: translateX(-4px);
   }
 
-  .navds-tooltip[data-side="right"] .navds-tooltip__arrow {
-    border-bottom: var(--__a-tooltip-high-contrast-border);
-    border-left: var(--__a-tooltip-high-contrast-border);
+  to {
+    transform: translateY(0);
   }
+}
 
-  .navds-tooltip[data-side="bottom"] .navds-tooltip__arrow {
-    border-left: var(--__a-tooltip-high-contrast-border);
-    border-top: var(--__a-tooltip-high-contrast-border);
+@keyframes aksel-tooltip-fade-in {
+  from {
+    opacity: 0.01;
   }
 
-  .navds-tooltip[data-side="left"] .navds-tooltip__arrow {
-    border-top: var(--__a-tooltip-high-contrast-border);
-    border-right: var(--__a-tooltip-high-contrast-border);
+  to {
+    opacity: 1;
+  }
+}
+
+.navds-tooltip__keys {
+  padding-bottom: var(--ax-spacing-1);
+  display: flex;
+  gap: var(--ax-spacing-1);
+}
+
+.navds-tooltip__key {
+  font-family: var(--ax-font-family);
+  color: var(--ax-text-default);
+  padding: 0 var(--ax-spacing-1);
+  min-width: 1.125rem;
+  height: 1.125rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--ax-border-radius-small);
+  background: var(--ax-bg-neutral-moderateA);
+
+  @media (forced-colors: active) {
+    & {
+      outline: 1px solid;
+    }
   }
 }
diff --git a/@navikt/core/react/src/tooltip/Tooltip.tsx b/@navikt/core/react/src/tooltip/Tooltip.tsx
@@ -15,6 +15,7 @@ import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
+import { UNSAFE_useAkselTheme } from "../provider";
 import { Slot } from "../slot/Slot";
 import { Detail } from "../typography";
 import { useId } from "../util/hooks";
@@ -123,6 +124,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     },
     ref,
   ) => {
+    const themeContext = UNSAFE_useAkselTheme(false);
+    const showArrow = _arrow && !themeContext;
+
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -149,7 +153,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       open: _open,
       onOpenChange: (newState) => _setOpen(newState),
       middleware: [
-        offset(_offset ? _offset : _arrow ? 10 : 2),
+        offset(_offset ?? (themeContext ? 8 : _arrow ? 16 : 4)),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
@@ -228,6 +232,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 ),
               })}
               data-side={placement}
+              data-state="open"
             >
               {content}
               {keys && (
@@ -239,7 +244,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                   ))}
                 </span>
               )}
-              {_arrow && (
+              {showArrow && (
                 <div
                   ref={(node) => {
                     arrowRef.current = node;