@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/components/toast/provider/ToastProvider.js

@@ -0,0 +1,91 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { Toast } from '../Toast';
+import styles from '../Toast.module.css';
+
+const ToastContext = createContext(void 0);
+function ToastProvider({
+  children,
+  defaultDuration = 1e4
+}) {
+  const [toasts, setToasts] = useState([]);
+  const timeouts = useRef(/* @__PURE__ */ new Map());
+  const clearTimeoutForId = (id) => {
+    const timeoutId = timeouts.current.get(id);
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+      timeouts.current.delete(id);
+    }
+  };
+  const hideToast = useCallback((id) => {
+    clearTimeoutForId(id);
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const scheduleAutoDismiss = useCallback(
+    (toast) => {
+      var _a;
+      const duration = (_a = toast.duration) != null ? _a : defaultDuration;
+      if (!duration || duration <= 0) return;
+      clearTimeoutForId(toast.id);
+      const timeoutId = window.setTimeout(() => {
+        hideToast(toast.id);
+      }, duration);
+      timeouts.current.set(toast.id, timeoutId);
+    },
+    [defaultDuration, hideToast]
+  );
+  const showToast = useCallback(
+    (config) => {
+      var _a, _b, _c;
+      const id = (_c = (_b = config.id) != null ? _b : (_a = crypto.randomUUID) == null ? void 0 : _a.call(crypto)) != null ? _c : `${Date.now()}-${Math.random()}`;
+      const toast = { ...config, id };
+      setToasts((prev) => [...prev, toast]);
+      scheduleAutoDismiss(toast);
+      return id;
+    },
+    [scheduleAutoDismiss]
+  );
+  const clearToasts = useCallback(() => {
+    toasts.forEach((t) => clearTimeoutForId(t.id));
+    setToasts([]);
+  }, [toasts]);
+  useEffect(
+    () => () => {
+      toasts.forEach((t) => clearTimeoutForId(t.id));
+    },
+    [toasts]
+  );
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { showToast, hideToast, clearToasts }, children: [
+    children,
+    toasts.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.container, "aria-live": "polite", "aria-atomic": "false", children: toasts.map((toast) => {
+      var _a;
+      return /* @__PURE__ */ jsx(
+        Toast,
+        {
+          title: toast.title,
+          message: toast.message,
+          severity: (_a = toast.severity) != null ? _a : "info",
+          action: toast.action && {
+            label: toast.action.label,
+            onClick: () => {
+              var _a2, _b;
+              (_b = (_a2 = toast.action) == null ? void 0 : _a2.onClick) == null ? void 0 : _b.call(_a2);
+              hideToast(toast.id);
+            }
+          },
+          onClose: () => hideToast(toast.id)
+        },
+        toast.id
+      );
+    }) })
+  ] });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return ctx;
+}
+
+export { ToastProvider, useToast };

package/dist/components/tooltip/Tooltip.cjs

@@ -2,12 +2,57 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var reactDom = require('react-dom');
 var styles = require('./Tooltip.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+const VIEWPORT_PADDING = 8;
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(n, max));
+}
+function computePosition(args) {
+  const { triggerRect, bubbleRect, placement, offset } = args;
+  switch (placement) {
+    case "top":
+      return {
+        left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
+        top: triggerRect.top - bubbleRect.height - offset
+      };
+    case "bottom":
+      return {
+        left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
+        top: triggerRect.bottom + offset
+      };
+    case "left":
+      return {
+        left: triggerRect.left - bubbleRect.width - offset,
+        top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2
+      };
+    case "right":
+      return {
+        left: triggerRect.right + offset,
+        top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2
+      };
+  }
+}
+function fitsViewport(pos, bubbleRect) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const leftOk = pos.left >= VIEWPORT_PADDING;
+  const rightOk = pos.left + bubbleRect.width <= vw - VIEWPORT_PADDING;
+  const topOk = pos.top >= VIEWPORT_PADDING;
+  const bottomOk = pos.top + bubbleRect.height <= vh - VIEWPORT_PADDING;
+  return leftOk && rightOk && topOk && bottomOk;
+}
+function flippedPlacement(p) {
+  if (p === "top") return "bottom";
+  if (p === "bottom") return "top";
+  if (p === "left") return "right";
+  return "left";
+}
 const Tooltip = ({
   children,
   content,
@@ -21,55 +66,115 @@ const Tooltip = ({
   const id = react.useId();
   const wrapperRef = react.useRef(null);
   const bubbleRef = react.useRef(null);
-  const [resolvedPlacement, setResolvedPlacement] = react.useState(placement);
-  react.useEffect(() => setResolvedPlacement(placement), [placement]);
-  const recomputePlacement = () => {
-    if (!flip) return setResolvedPlacement(placement);
+  const [internalOpen, setInternalOpen] = react.useState(false);
+  const [coords, setCoords] = react.useState({
+    top: 0,
+    left: 0,
+    placement,
+    visible: false
+  });
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? !!open : internalOpen;
+  react.useEffect(() => {
+    setCoords((c) => ({ ...c, placement }));
+  }, [placement]);
+  const recompute = () => {
     const wrapper = wrapperRef.current;
     const bubble = bubbleRef.current;
     if (!wrapper || !bubble) return;
-    const wrapperRect = wrapper.getBoundingClientRect();
+    const triggerRect = wrapper.getBoundingClientRect();
     const bubbleRect = bubble.getBoundingClientRect();
-    const spaceAbove = wrapperRect.top - (bubbleRect.height + offset);
-    const spaceBelow = window.innerHeight - wrapperRect.bottom - (bubbleRect.height + offset);
-    if (placement === "top") {
-      setResolvedPlacement(spaceAbove >= 0 ? "top" : "bottom");
-    } else if (placement === "bottom") {
-      setResolvedPlacement(spaceBelow >= 0 ? "bottom" : "top");
-    } else {
-      setResolvedPlacement(placement);
+    const candidates = flip ? [placement, flippedPlacement(placement)] : [placement];
+    let chosen = candidates[0];
+    let pos = computePosition({ triggerRect, bubbleRect, placement: chosen, offset });
+    if (flip && !fitsViewport(pos, bubbleRect) && candidates.length > 1) {
+      const alt = candidates[1];
+      const altPos = computePosition({ triggerRect, bubbleRect, placement: alt, offset });
+      if (fitsViewport(altPos, bubbleRect)) {
+        chosen = alt;
+        pos = altPos;
+      }
     }
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const clampedLeft = clamp(pos.left, VIEWPORT_PADDING, vw - bubbleRect.width - VIEWPORT_PADDING);
+    const clampedTop = clamp(pos.top, VIEWPORT_PADDING, vh - bubbleRect.height - VIEWPORT_PADDING);
+    setCoords({
+      left: clampedLeft,
+      top: clampedTop,
+      placement: chosen,
+      visible: true
+    });
   };
   react.useLayoutEffect(() => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper) return;
-    const onShow = () => recomputePlacement();
-    const onResize = () => recomputePlacement();
-    const onScroll = () => recomputePlacement();
-    wrapper.addEventListener("mouseenter", onShow);
-    wrapper.addEventListener("focusin", onShow);
+    if (!isOpen) {
+      setCoords((c) => ({ ...c, visible: false }));
+      return;
+    }
+    const raf = requestAnimationFrame(() => recompute());
+    const onResize = () => recompute();
+    const onScroll = () => recompute();
     window.addEventListener("resize", onResize);
-    window.addEventListener("scroll", onScroll, { passive: true });
-    if (open) recomputePlacement();
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
     return () => {
-      wrapper.removeEventListener("mouseenter", onShow);
-      wrapper.removeEventListener("focusin", onShow);
+      cancelAnimationFrame(raf);
       window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("scroll", onScroll, true);
       window.removeEventListener("scroll", onScroll);
     };
-  }, [open, placement, flip, offset]);
-  const rootClass = [styles__default.default.container, className].filter(Boolean).join(" ");
+  }, [isOpen, placement, flip, offset, content]);
+  const onMouseEnter = () => {
+    if (!isControlled) setInternalOpen(true);
+  };
+  const onMouseLeave = () => {
+    if (!isControlled) setInternalOpen(false);
+  };
+  const onFocusIn = () => {
+    if (!isControlled) setInternalOpen(true);
+  };
+  const onFocusOut = () => {
+    if (!isControlled) setInternalOpen(false);
+  };
+  const rootClass = react.useMemo(
+    () => [styles__default.default.container, className].filter(Boolean).join(" "),
+    [className]
+  );
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => setMounted(true), []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: wrapperRef,
       className: rootClass,
-      "data-open": open ? "true" : void 0,
-      "data-placement": resolvedPlacement,
+      onMouseEnter,
+      onMouseLeave,
+      onFocusCapture: onFocusIn,
+      onBlurCapture: onFocusOut,
       ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.trigger, "aria-describedby": id, tabIndex: 0, children }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: bubbleRef, id, role: "tooltip", className: styles__default.default.bubble, children: content })
+        mounted && isOpen ? reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: bubbleRef,
+              id,
+              role: "tooltip",
+              className: styles__default.default.bubble,
+              "data-open": coords.visible ? "true" : "false",
+              "data-placement": coords.placement,
+              style: {
+                top: coords.top,
+                left: coords.left,
+                visibility: coords.visible ? "visible" : "hidden"
+              },
+              "aria-hidden": !coords.visible,
+              children: content
+            }
+          ),
+          document.body
+        ) : null
       ]
     }
   );

package/dist/components/tooltip/Tooltip.js

@@ -1,7 +1,52 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId, useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { useId, useRef, useState, useEffect, useLayoutEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
 import styles from './Tooltip.module.css';
 
+const VIEWPORT_PADDING = 8;
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(n, max));
+}
+function computePosition(args) {
+  const { triggerRect, bubbleRect, placement, offset } = args;
+  switch (placement) {
+    case "top":
+      return {
+        left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
+        top: triggerRect.top - bubbleRect.height - offset
+      };
+    case "bottom":
+      return {
+        left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
+        top: triggerRect.bottom + offset
+      };
+    case "left":
+      return {
+        left: triggerRect.left - bubbleRect.width - offset,
+        top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2
+      };
+    case "right":
+      return {
+        left: triggerRect.right + offset,
+        top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2
+      };
+  }
+}
+function fitsViewport(pos, bubbleRect) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const leftOk = pos.left >= VIEWPORT_PADDING;
+  const rightOk = pos.left + bubbleRect.width <= vw - VIEWPORT_PADDING;
+  const topOk = pos.top >= VIEWPORT_PADDING;
+  const bottomOk = pos.top + bubbleRect.height <= vh - VIEWPORT_PADDING;
+  return leftOk && rightOk && topOk && bottomOk;
+}
+function flippedPlacement(p) {
+  if (p === "top") return "bottom";
+  if (p === "bottom") return "top";
+  if (p === "left") return "right";
+  return "left";
+}
 const Tooltip = ({
   children,
   content,
@@ -15,55 +60,115 @@ const Tooltip = ({
   const id = useId();
   const wrapperRef = useRef(null);
   const bubbleRef = useRef(null);
-  const [resolvedPlacement, setResolvedPlacement] = useState(placement);
-  useEffect(() => setResolvedPlacement(placement), [placement]);
-  const recomputePlacement = () => {
-    if (!flip) return setResolvedPlacement(placement);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [coords, setCoords] = useState({
+    top: 0,
+    left: 0,
+    placement,
+    visible: false
+  });
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? !!open : internalOpen;
+  useEffect(() => {
+    setCoords((c) => ({ ...c, placement }));
+  }, [placement]);
+  const recompute = () => {
     const wrapper = wrapperRef.current;
     const bubble = bubbleRef.current;
     if (!wrapper || !bubble) return;
-    const wrapperRect = wrapper.getBoundingClientRect();
+    const triggerRect = wrapper.getBoundingClientRect();
     const bubbleRect = bubble.getBoundingClientRect();
-    const spaceAbove = wrapperRect.top - (bubbleRect.height + offset);
-    const spaceBelow = window.innerHeight - wrapperRect.bottom - (bubbleRect.height + offset);
-    if (placement === "top") {
-      setResolvedPlacement(spaceAbove >= 0 ? "top" : "bottom");
-    } else if (placement === "bottom") {
-      setResolvedPlacement(spaceBelow >= 0 ? "bottom" : "top");
-    } else {
-      setResolvedPlacement(placement);
+    const candidates = flip ? [placement, flippedPlacement(placement)] : [placement];
+    let chosen = candidates[0];
+    let pos = computePosition({ triggerRect, bubbleRect, placement: chosen, offset });
+    if (flip && !fitsViewport(pos, bubbleRect) && candidates.length > 1) {
+      const alt = candidates[1];
+      const altPos = computePosition({ triggerRect, bubbleRect, placement: alt, offset });
+      if (fitsViewport(altPos, bubbleRect)) {
+        chosen = alt;
+        pos = altPos;
+      }
     }
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const clampedLeft = clamp(pos.left, VIEWPORT_PADDING, vw - bubbleRect.width - VIEWPORT_PADDING);
+    const clampedTop = clamp(pos.top, VIEWPORT_PADDING, vh - bubbleRect.height - VIEWPORT_PADDING);
+    setCoords({
+      left: clampedLeft,
+      top: clampedTop,
+      placement: chosen,
+      visible: true
+    });
   };
   useLayoutEffect(() => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper) return;
-    const onShow = () => recomputePlacement();
-    const onResize = () => recomputePlacement();
-    const onScroll = () => recomputePlacement();
-    wrapper.addEventListener("mouseenter", onShow);
-    wrapper.addEventListener("focusin", onShow);
+    if (!isOpen) {
+      setCoords((c) => ({ ...c, visible: false }));
+      return;
+    }
+    const raf = requestAnimationFrame(() => recompute());
+    const onResize = () => recompute();
+    const onScroll = () => recompute();
     window.addEventListener("resize", onResize);
-    window.addEventListener("scroll", onScroll, { passive: true });
-    if (open) recomputePlacement();
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
     return () => {
-      wrapper.removeEventListener("mouseenter", onShow);
-      wrapper.removeEventListener("focusin", onShow);
+      cancelAnimationFrame(raf);
       window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("scroll", onScroll, true);
       window.removeEventListener("scroll", onScroll);
     };
-  }, [open, placement, flip, offset]);
-  const rootClass = [styles.container, className].filter(Boolean).join(" ");
+  }, [isOpen, placement, flip, offset, content]);
+  const onMouseEnter = () => {
+    if (!isControlled) setInternalOpen(true);
+  };
+  const onMouseLeave = () => {
+    if (!isControlled) setInternalOpen(false);
+  };
+  const onFocusIn = () => {
+    if (!isControlled) setInternalOpen(true);
+  };
+  const onFocusOut = () => {
+    if (!isControlled) setInternalOpen(false);
+  };
+  const rootClass = useMemo(
+    () => [styles.container, className].filter(Boolean).join(" "),
+    [className]
+  );
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: wrapperRef,
       className: rootClass,
-      "data-open": open ? "true" : void 0,
-      "data-placement": resolvedPlacement,
+      onMouseEnter,
+      onMouseLeave,
+      onFocusCapture: onFocusIn,
+      onBlurCapture: onFocusOut,
       ...rest,
       children: [
         /* @__PURE__ */ jsx("div", { className: styles.trigger, "aria-describedby": id, tabIndex: 0, children }),
-        /* @__PURE__ */ jsx("div", { ref: bubbleRef, id, role: "tooltip", className: styles.bubble, children: content })
+        mounted && isOpen ? createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: bubbleRef,
+              id,
+              role: "tooltip",
+              className: styles.bubble,
+              "data-open": coords.visible ? "true" : "false",
+              "data-placement": coords.placement,
+              style: {
+                top: coords.top,
+                left: coords.left,
+                visibility: coords.visible ? "visible" : "hidden"
+              },
+              "aria-hidden": !coords.visible,
+              children: content
+            }
+          ),
+          document.body
+        ) : null
       ]
     }
   );

package/dist/components/tooltip/Tooltip.module.css

@@ -1,5 +1,4 @@
 .container {
-  position: relative;
   display: inline-flex;
 }
 
@@ -13,9 +12,9 @@
 }
 
 .bubble {
-  position: absolute;
-  background: var(--color-text);
-  color: var(--color-text-inverse);
+  position: fixed;
+  background: var(--color-fg-default);
+  color: var(--color-fg-on-strong);
   font-size: var(--font-size-xs);
   padding: var(--spacing-xxs) var(--spacing-sm);
   border-radius: var(--border-radius-default);
@@ -23,58 +22,41 @@
   white-space: nowrap;
   z-index: var(--z-tooltip);
   pointer-events: none;
+
   opacity: 0;
-  transform: translate(-50%, -8px);
-  left: 50%;
-  bottom: calc(100% + var(--spacing-xs));
+  transform: translateY(-6px);
   transition:
     opacity var(--transition-fast),
     transform var(--transition-fast);
 }
 
-.container[data-placement='top'] .bubble {
-  left: 50%;
-  bottom: calc(100% + var(--spacing-xs));
-  transform: translate(-50%, -8px);
-}
-.container[data-placement='bottom'] .bubble {
-  top: calc(100% + var(--spacing-xs));
-  left: 50%;
-  transform: translate(-50%, 8px);
+.bubble[data-open='true'] {
+  opacity: 1;
+  transform: translateY(0);
 }
-.container[data-placement='left'] .bubble {
-  right: calc(100% + var(--spacing-xs));
-  top: 50%;
-  transform: translate(-8px, -50%);
+
+.bubble[data-placement='bottom'] {
+  transform: translateY(6px);
 }
-.container[data-placement='right'] .bubble {
-  left: calc(100% + var(--spacing-xs));
-  top: 50%;
-  transform: translate(8px, -50%);
+.bubble[data-placement='bottom'][data-open='true'] {
+  transform: translateY(0);
 }
 
-.container:hover .bubble,
-.container:focus-within .bubble,
-.container[data-open='true'] .bubble {
-  opacity: 1;
-  height: fit-content;
-  transform: translate(-50%, 0);
+.bubble[data-placement='left'],
+.bubble[data-placement='right'] {
+  transform: translateX(6px);
 }
-
-.container[data-placement='bottom']:hover .bubble,
-.container[data-placement='bottom']:focus-within .bubble,
-.container[data-placement='bottom'][data-open='true'] .bubble {
-  transform: translate(-50%, 0);
+.bubble[data-placement='left'] {
+  transform: translateX(-6px);
 }
-.container[data-placement='left']:hover .bubble,
-.container[data-placement='left']:focus-within .bubble,
-.container[data-placement='left'][data-open='true'] .bubble {
-  transform: translate(0, -50%);
+.bubble[data-placement='left'][data-open='true'],
+.bubble[data-placement='right'][data-open='true'] {
+  transform: translateX(0);
 }
-.container[data-placement='right']:hover .bubble,
-.container[data-placement='right']:focus-within .bubble,
-.container[data-placement='right'][data-open='true'] .bubble {
-  transform: translate(0, -50%);
+
+.bubble svg {
+  height: 20px;
+  width: 20px;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/components/user-display/UserDisplay.module.css

@@ -12,11 +12,11 @@
   justify-content: center;
   padding: var(--spacing-sm);
   flex-grow: 0;
-  color: var(--color-text-muted);
+  color: var(--color-fg-muted);
 }
 
 .userInfo h4 {
-  color: var(--color-text);
+  color: var(--color-fg-default);
   margin: 0;
 }
 

package/dist/constants/severity.cjs

@@ -1,20 +1,20 @@
 'use strict';
 
 const SeverityBgColor = {
-  neutral: "var(--color-secondary)",
-  brand: "var(--color-primary)",
-  success: "var(--color-success)",
-  error: "var(--color-error)",
-  info: "var(--color-info)",
-  warning: "var(--color-warning)"
+  neutral: "var(--color-neutral-strong)",
+  brand: "var(--color-brand)",
+  success: "var(--color-status-success)",
+  error: "var(--color-status-error)",
+  info: "var(--color-status-info)",
+  warning: "var(--color-status-warning)"
 };
 const SeverityTextColor = {
-  neutral: "var(--color-text-inverse)",
-  brand: "var(--color-text-on-primary)",
-  success: "var(--color-text-inverse)",
-  error: "var(--color-text-inverse)",
-  info: "var(--color-text-inverse)",
-  warning: "var(--color-text-inverse)"
+  neutral: "var(--color-neutral-strong-fg)",
+  brand: "var(--color-fg-on-brand)",
+  success: "var(--color-status-success-fg)",
+  error: "var(--color-status-error-fg)",
+  info: "var(--color-status-info-fg)",
+  warning: "var(--color-status-warning-fg)"
 };
 
 exports.SeverityBgColor = SeverityBgColor;

package/dist/constants/severity.js

@@ -1,18 +1,18 @@
 const SeverityBgColor = {
-  neutral: "var(--color-secondary)",
-  brand: "var(--color-primary)",
-  success: "var(--color-success)",
-  error: "var(--color-error)",
-  info: "var(--color-info)",
-  warning: "var(--color-warning)"
+  neutral: "var(--color-neutral-strong)",
+  brand: "var(--color-brand)",
+  success: "var(--color-status-success)",
+  error: "var(--color-status-error)",
+  info: "var(--color-status-info)",
+  warning: "var(--color-status-warning)"
 };
 const SeverityTextColor = {
-  neutral: "var(--color-text-inverse)",
-  brand: "var(--color-text-on-primary)",
-  success: "var(--color-text-inverse)",
-  error: "var(--color-text-inverse)",
-  info: "var(--color-text-inverse)",
-  warning: "var(--color-text-inverse)"
+  neutral: "var(--color-neutral-strong-fg)",
+  brand: "var(--color-fg-on-brand)",
+  success: "var(--color-status-success-fg)",
+  error: "var(--color-status-error-fg)",
+  info: "var(--color-status-info-fg)",
+  warning: "var(--color-status-warning-fg)"
 };
 
 export { SeverityBgColor, SeverityTextColor };