@fibery/ui-kit 1.40.3 → 1.41.0

package/src/theme-provider.tsx

@@ -1,8 +1,25 @@
 import invariant from "invariant";
-import {themeStyles} from "./theme-styles";
+import {
+  chooseGlobalStyles,
+  defaultLightTheme,
+  defaultLightThemeStyles,
+  defaultPalette,
+  selectGlobalTheme,
+} from "./theme-styles";
 import {layoutStyles} from "./layout-styles";
-import {createContext, ReactNode, useContext, useEffect, useLayoutEffect, useState} from "react";
-import {colors, getThemeColors, ThemeColors} from "./design-system";
+import {
+  createContext,
+  forwardRef,
+  PropsWithChildren,
+  ReactNode,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
+import {createInlineStyles, getThemeColors, ThemeColors, ThemeStyles} from "./design-system";
+import {selectPalette, ThemePalette} from "./palette-generator";
 import {
   subscribeOnThemeMenuPreferenceChange,
   subscribeOnThemeModeChange,
@@ -10,19 +27,30 @@ import {
   ThemeMenuPreference,
   ThemeMode,
   ThemePreference,
+  useWarmPreference,
 } from "./theme-settings";
+import {css} from "@linaria/core";
 
-const FiberyThemePreferenceContext = createContext<ThemePreference | null>(null);
-const FiberyThemeMenuPreferenceContext = createContext<ThemeMenuPreference | null>(null);
+const ThemePreferenceContext = createContext<ThemePreference | null>(null);
+
+export function useThemePreference(): ThemePreference {
+  const themePreference = useContext(ThemePreferenceContext);
+  invariant(themePreference, `please ensure the component is wrapped in a <RootThemeProvider>`);
+  return themePreference;
+}
 
-const FiberyThemeContext = createContext<ThemeColors>(getThemeColors(colors.brandColors.blue, "light"));
+const ThemeMenuPreferenceContext = createContext<ThemeMenuPreference | null>(null);
 
-function ThemeProvider({theme, children}: {theme: ThemeColors; children: ReactNode}): JSX.Element {
-  return <FiberyThemeContext.Provider value={theme}>{children}</FiberyThemeContext.Provider>;
+export function useThemeMenuPreference(): ThemeMenuPreference {
+  const themeMenuPreference = useContext(ThemeMenuPreferenceContext);
+  invariant(themeMenuPreference, `please ensure the component is wrapped in a <RootThemeProvider>`);
+  return themeMenuPreference;
 }
 
+const ThemeColorsContext = createContext<ThemeColors>(defaultLightTheme);
+
 export function useTheme(): ThemeColors {
-  return useContext(FiberyThemeContext);
+  return useContext(ThemeColorsContext);
 }
 
 export function useThemeMode(): ThemeMode {
@@ -30,63 +58,153 @@ export function useThemeMode(): ThemeMode {
   return theme.mode;
 }
 
-export function useThemePreference(): ThemePreference {
-  const themePreference = useContext(FiberyThemePreferenceContext);
+const RootThemeStylesContext = createContext<ThemeStyles>(defaultLightThemeStyles);
+const ThemeStylesContext = createContext<ThemeStyles>(defaultLightThemeStyles);
 
-  invariant(
-    themePreference,
-    "could not find theme preference context value; please ensure the component is wrapped in a <FiberyThemePreferenceContext>"
-  );
+export function useThemeStyles(): ThemeStyles {
+  return useContext(ThemeStylesContext);
+}
 
-  return themePreference;
+const ThemePaletteContext = createContext<ThemePalette>(defaultPalette);
+
+export function useThemePalette(): ThemePalette {
+  return useContext(ThemePaletteContext);
 }
 
-export function useThemeMenuPreference(): ThemeMenuPreference {
-  const themeMenuPreference = useContext(FiberyThemeMenuPreferenceContext);
+type ThematicContextValue = {
+  palette: ThemePalette;
+  setPalette: (palette: ThemePalette | null) => void;
+};
 
-  invariant(
-    themeMenuPreference,
-    "could not find theme menu preference context value; please ensure the component is wrapped in a <FiberyThemeMenuPreferenceContext>"
-  );
+const ThematicContext = createContext<ThematicContextValue>({
+  palette: defaultPalette,
+  setPalette: () => {},
+});
 
-  return themeMenuPreference;
+export function useThematic(): ThematicContextValue {
+  return useContext(ThematicContext);
 }
 
-export function useMenuTheme() {
-  const themeMode = useThemeMode();
-  return getThemeColors(colors.brandColors.blue, themeMode === "light" ? "light" : "dark");
+export function ThemeProvider({
+  theme: themeOverride,
+  color: colorOverride,
+  mode: modeOverride,
+  portal,
+  children,
+}: PropsWithChildren<
+  {portal?: true} & (
+    | {theme: ThemeColors; color?: never; mode?: never}
+    | {color?: string; theme?: never; mode?: ThemeMode}
+  )
+>) {
+  const palette = useContext(ThemePaletteContext);
+  const parentTheme = useContext(ThemeColorsContext);
+
+  const mode = modeOverride ?? parentTheme.mode;
+  const color = colorOverride ?? parentTheme.primary;
+  const theme = themeOverride ?? getThemeColors(color, mode, palette);
+
+  const parentStyles = useContext(portal ? RootThemeStylesContext : ThemeStylesContext);
+  const styles = createInlineStyles(theme);
+  const stylesDiff = useMemo(() => {
+    if (styles === parentStyles) {
+      return undefined;
+    }
+    const diff: ThemeStyles = {};
+    for (const key of Object.keys(styles)) {
+      if (styles[key] !== parentStyles[key]) {
+        diff[key] = styles[key];
+      }
+    }
+    return diff;
+  }, [styles, parentStyles]);
+
+  return (
+    <ThemeColorsContext.Provider value={theme}>
+      <ThemeStylesContext.Provider value={styles}>
+        <div
+          style={stylesDiff}
+          className={css`
+            display: contents;
+          `}
+        >
+          {children}
+        </div>
+      </ThemeStylesContext.Provider>
+    </ThemeColorsContext.Provider>
+  );
 }
 
+/**
+ * Wrapper for ThemeProvider that absorbs Radix Portal's `asChild` ref/props.
+ * Use as direct child of Radix Portal components (MenuPortal, TooltipPortal, etc.)
+ */
+export const RadixPortalThemeProvider = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
+  function PortalThemeProvider({children, ...rest}, ref) {
+    return (
+      <div ref={ref} {...rest}>
+        <ThemeProvider portal>{children}</ThemeProvider>
+      </div>
+    );
+  }
+);
+
 export function MenuThemeProvider({children}: {children: ReactNode}) {
-  const theme = useMenuTheme();
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  const themeMode = useThemeMode();
+  // light2 = always dark menu
+  const mode = themeMode === "light" ? "light" : "dark";
+  return <ThemeProvider mode={mode}>{children}</ThemeProvider>;
 }
 
 export function RootThemeProvider({
   initialThemeMode,
   initialPreference,
   initialMenuPreference,
+  isArchitect = false,
   children,
 }: {
   initialThemeMode: ThemeMode;
   initialPreference: ThemePreference;
   initialMenuPreference: ThemeMenuPreference;
+  isArchitect?: boolean;
   children: ReactNode;
 }): JSX.Element {
   const [themeMode, setThemeMode] = useState<ThemeMode>(initialThemeMode);
+  useEffect(() => subscribeOnThemeModeChange(setThemeMode), []);
+
+  const [warm] = useWarmPreference();
+  useEffect(() => chooseGlobalStyles(themeMode, warm), [themeMode, warm]);
+
+  const [paletteOverride, setPaletteOverride] = useState<ThemePalette | null>(null);
+
+  const palette = useMemo(() => {
+    return paletteOverride ?? selectPalette({warmLook: warm, isArchitect});
+  }, [paletteOverride, warm, isArchitect]);
+
+  let res = <ThemeProvider theme={getThemeColors(null, themeMode, palette)}>{children}</ThemeProvider>;
+
+  // Set base context to what global CSS has, so ThemeProvider diffs against it
+  const [cssThemeColors, cssThemeStyles] = selectGlobalTheme(warm, themeMode === "dark");
+  res = <ThemeStylesContext.Provider value={cssThemeStyles}>{res}</ThemeStylesContext.Provider>;
+  res = <RootThemeStylesContext.Provider value={cssThemeStyles}>{res}</RootThemeStylesContext.Provider>;
+  res = <ThemeColorsContext.Provider value={cssThemeColors}>{res}</ThemeColorsContext.Provider>;
+
+  res = <ThemePaletteContext.Provider value={palette}>{res}</ThemePaletteContext.Provider>;
+
+  const thematicContextValue = useMemo<ThematicContextValue>(
+    () => ({palette, setPalette: setPaletteOverride}),
+    [palette, setPaletteOverride]
+  );
+  res = <ThematicContext.Provider value={thematicContextValue}>{res}</ThematicContext.Provider>;
+
   const [themePreference, setThemePreference] = useState<ThemePreference>(initialPreference);
+  useEffect(() => subscribeOnThemePreferenceChange(setThemePreference), []);
+  res = <ThemePreferenceContext.Provider value={themePreference}>{res}</ThemePreferenceContext.Provider>;
+
   const [themeMenuPreference, setThemeMenuPreference] = useState<ThemeMenuPreference>(initialMenuPreference);
-  const theme = getThemeColors(colors.brandColors.blue, themeMode);
-  useEffect(() => {
-    const unsubscribeMode = subscribeOnThemeModeChange(setThemeMode);
-    const unsubscribePreference = subscribeOnThemePreferenceChange(setThemePreference);
-    const unsubscribeMenuPreference = subscribeOnThemeMenuPreferenceChange(setThemeMenuPreference);
-    return () => {
-      unsubscribeMode();
-      unsubscribePreference();
-      unsubscribeMenuPreference();
-    };
-  }, []);
+  useEffect(() => subscribeOnThemeMenuPreferenceChange(setThemeMenuPreference), []);
+  res = <ThemeMenuPreferenceContext.Provider value={themeMenuPreference}>{res}</ThemeMenuPreferenceContext.Provider>;
+
   useLayoutEffect(() => {
     const documentElement = document.documentElement;
     documentElement.classList.add(layoutStyles);
@@ -94,58 +212,6 @@ export function RootThemeProvider({
       documentElement.classList.remove(layoutStyles);
     };
   }, []);
-  useEffect(() => {
-    const darkThemeClassName = "dark-theme";
-    const lightThemeAndDarkMenuClassName = "light-theme-and-dark-menu";
-    const meta = document.querySelector('meta[name="color-scheme"]');
-    let colorScheme = "light";
-    const documentElement = document.documentElement;
-    documentElement.classList.remove(darkThemeClassName);
-    documentElement.classList.remove(lightThemeAndDarkMenuClassName);
-    documentElement.classList.add(themeStyles);
-    if (themeMode === "dark") {
-      documentElement.classList.add(darkThemeClassName);
-      colorScheme = "dark";
-    } else if (themeMode === "light2") {
-      documentElement.classList.add(lightThemeAndDarkMenuClassName);
-    }
-
-    documentElement.style.colorScheme = colorScheme;
-    meta?.setAttribute("content", colorScheme);
 
-    return () => {
-      documentElement.classList.remove(darkThemeClassName);
-      documentElement.classList.remove(lightThemeAndDarkMenuClassName);
-    };
-  }, [themeMode]);
-
-  return (
-    <FiberyThemePreferenceContext.Provider value={themePreference}>
-      <FiberyThemeMenuPreferenceContext.Provider value={themeMenuPreference}>
-        <ThemeProvider theme={theme}>{children}</ThemeProvider>
-      </FiberyThemeMenuPreferenceContext.Provider>
-    </FiberyThemePreferenceContext.Provider>
-  );
-}
-
-interface WithThemeModeProps {
-  themeMode: ThemeMode;
+  return res;
 }
-
-export function withThemeMode<T extends WithThemeModeProps = WithThemeModeProps>(
-  WrappedComponent: React.ComponentType<T>
-) {
-  const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component";
-
-  const ComponentWithThemeMode = (props: Omit<T, keyof WithThemeModeProps>) => {
-    const themeMode = useThemeMode();
-
-    return <WrappedComponent {...(props as T)} themeMode={themeMode} />;
-  };
-
-  ComponentWithThemeMode.displayName = `withThemeMode(${displayName})`;
-
-  return ComponentWithThemeMode;
-}
-
-export {ThemeProvider};

package/src/theme-settings.ts

@@ -1,3 +1,4 @@
+import {useEffect, useState} from "react";
 import {getMediaQueryList, subscribeOnChange as subscribeOnMediaQueryChange} from "./media-query-utils";
 
 const listenersThemeMode = new Map();
@@ -10,6 +11,7 @@ const themeMenuPreferenceKey = "theme-menu-preference";
 export type ThemePreference = "dark" | "light" | "auto";
 export type ThemeMenuPreference = "dark" | "auto";
 
+export const themeModes = ["dark", "light", "light2"] as const;
 export type ThemeMode = "dark" | "light" | "light2";
 
 export function getThemePreference(): ThemePreference {
@@ -42,7 +44,7 @@ export function getThemeMenuPreference(): ThemeMenuPreference {
   return "auto";
 }
 
-export const alignTheme = (theme: ThemeMode) => {
+export const alignTheme = (theme: ThemeMode): "light" | "dark" => {
   if (theme === "light2") {
     return "light";
   }
@@ -56,22 +58,18 @@ function getDarkMediaQuery() {
 }
 
 export function getThemeMode(): ThemeMode {
-  const preference = getThemePreference();
-  const menuPreference = getThemeMenuPreference();
-
-  if (preference === "auto") {
-    const matches = getDarkMediaQuery().matches;
-    if (matches) {
+  const item = getThemePreference();
+  const menu = getThemeMenuPreference();
+  if (item === "auto") {
+    if (getDarkMediaQuery().matches) {
       return "dark";
-    }
-    if (menuPreference === "dark") {
+    } else if (menu === "dark") {
       return "light2";
     }
     return "light";
-  } else if (preference === "dark") {
+  } else if (item === "dark") {
     return "dark";
-  }
-  if (menuPreference === "dark") {
+  } else if (menu === "dark") {
     return "light2";
   }
   return "light";
@@ -171,3 +169,60 @@ export function subscribeOnThemeModeChange(cb: (themeMode: ThemeMode) => void):
     window.removeEventListener("storage", storageListener);
   };
 }
+
+const warmKey = "warm";
+const warmListeners = new Set<(warm: boolean) => void>();
+
+export function hasWarmPreference(): boolean {
+  try {
+    return localStorage.getItem(warmKey) !== null;
+  } catch {
+    return false;
+  }
+}
+
+export function loadWarmPreference(): boolean {
+  try {
+    return localStorage.getItem(warmKey) === "true";
+  } catch {
+    return false;
+  }
+}
+
+export function storeWarmPreference(warm: boolean) {
+  try {
+    localStorage.setItem(warmKey, JSON.stringify(warm));
+  } catch {
+    // ignore
+  }
+  warmListeners.forEach((cb) => cb(warm));
+}
+
+export function subscribeOnWarmPreferenceChange(cb: (warm: boolean) => void): () => void {
+  warmListeners.add(cb);
+  let prev = loadWarmPreference();
+  const storageListener = () => {
+    const next = loadWarmPreference();
+    if (prev !== next) {
+      prev = next;
+      cb(next);
+    }
+  };
+  window.addEventListener("storage", storageListener);
+  return () => {
+    warmListeners.delete(cb);
+    window.removeEventListener("storage", storageListener);
+  };
+}
+
+export function useWarmPreference() {
+  const [warm, setWarm] = useState(loadWarmPreference);
+  useEffect(() => subscribeOnWarmPreferenceChange(setWarm), []);
+  return [
+    warm,
+    (warm: boolean) => {
+      setWarm(warm);
+      storeWarmPreference(warm);
+    },
+  ] as const;
+}

package/src/theme-styles.ts

@@ -1,14 +1,66 @@
 import {css} from "@linaria/core";
-import {createInlineTheme, getThemeColors, colors} from "./design-system";
-const lightTheme = getThemeColors(colors.brandColors.blue, "light");
-const darkTheme = getThemeColors(colors.brandColors.blue, "dark");
+import {createInlineStyles, getThemeColors, ThemeColors, ThemeStyles} from "./design-system";
+import {warmUserPalette} from "./palettes/warm-user";
+import {slateUserPalette} from "./palettes/slate-user";
+import {ThemeMode} from "./theme-settings";
 
-export const themeStyles = css`
+export const defaultPalette = slateUserPalette;
+export const defaultLightTheme = getThemeColors(null, "light", defaultPalette);
+export const defaultDarkTheme = getThemeColors(null, "dark", defaultPalette);
+
+const warmPalette = warmUserPalette;
+const warmLightTheme = getThemeColors(null, "light", warmPalette);
+const warmDarkTheme = getThemeColors(null, "dark", warmPalette);
+
+export const defaultLightThemeStyles = createInlineStyles(defaultLightTheme);
+export const defaultDarkThemeStyles = createInlineStyles(defaultDarkTheme);
+
+const warmLightThemeStyles = createInlineStyles(warmLightTheme);
+const warmDarkThemeStyles = createInlineStyles(warmDarkTheme);
+
+export function selectGlobalTheme(warm: boolean, dark: boolean): [colors: ThemeColors, styles: ThemeStyles] {
+  if (warm) {
+    return dark ? [warmDarkTheme, warmDarkThemeStyles] : [warmLightTheme, warmLightThemeStyles];
+  } else {
+    return dark ? [defaultDarkTheme, defaultDarkThemeStyles] : [defaultLightTheme, defaultLightThemeStyles];
+  }
+}
+
+const darkClassName = "dark-theme";
+const light2ClassName = "light-theme-and-dark-menu";
+const warmClassName = "warm-palette";
+
+export function chooseGlobalStyles(themeMode: ThemeMode, warm: boolean) {
+  const htmlElement = document.documentElement;
+  htmlElement.classList.toggle(darkClassName, themeMode === "dark");
+  htmlElement.classList.toggle(light2ClassName, themeMode === "light2");
+  htmlElement.classList.toggle(warmClassName, warm);
+
+  const colorScheme = themeMode === "dark" ? "dark" : "light";
+  htmlElement.style.colorScheme = colorScheme;
+
+  // Multiple color schemes (FIXME: missing, unknown implications) "light" | "dark" | "light dark" | "dark light"
+  // indicates that the first scheme is preferred by the document, but that the second scheme is acceptable if the user prefers it.
+  // see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/color-scheme#usage_notes
+  const colorSchemeMeta = document.querySelector('meta[name="color-scheme"]');
+  colorSchemeMeta?.setAttribute("content", colorScheme);
+
+  htmlElement.classList.add(globals);
+}
+
+export const globals = css`
   :global() {
     html:root {
-      ${createInlineTheme(lightTheme, [])}
+      ${defaultLightThemeStyles}
       &.dark-theme {
-        ${createInlineTheme(darkTheme, [])}
+        ${defaultDarkThemeStyles}
+      }
+
+      &.warm-palette {
+        ${warmLightThemeStyles}
+        &.dark-theme {
+          ${warmDarkThemeStyles}
+        }
       }
     }
   }

package/src/toast/toast-action.tsx

@@ -19,7 +19,7 @@ export const ToastAction = forwardRef<
   ButtonProps & {altText: ToastActionProps["altText"]}
 >(({children, altText, ...props}, ref) => {
   const theme = useTheme();
-  const buttonColors = theme.mode === "dark" ? makeButtonColors(theme.textColor, "outline") : {};
+  const buttonColors = theme.mode === "dark" ? makeButtonColors(theme.textColor, "outline", theme) : {};
   return (
     <RadixToastAction className={toastActionCss} ref={ref} altText={altText} asChild>
       <Button style={buttonColors} variant="outline" color="neutral" {...props}>

package/src/toast/toast.tsx

@@ -1,7 +1,7 @@
 import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css, cx} from "@linaria/core";
-import {useEffect, useRef, useCallback} from "react";
+import {useCallback, useEffect, useRef} from "react";
 import {space, themeVars} from "../design-system";
 import Spinner from "../icons/react/Spinner";
 import CheckCircleFilled from "../icons/react/CheckCircleFilled";
@@ -115,7 +115,6 @@ export const Toast: React.FC<ToastProps> = (props) => {
         clearTimeout(emergencyTimeout);
       };
     }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   }, [isOpen, onHideCb]);
 

package/src/toggle-on-off.tsx

@@ -1,12 +1,12 @@
-import chroma from "chroma-js";
 import {FC, ComponentProps, useMemo} from "react";
+import {isValidColor} from "./color-utils";
 import {ThemeColors} from "./design-system";
 import {useTheme} from "./theme-provider";
 import {Toggle} from "./toggle";
 import {useIsPhone} from "./use-is-phone";
 
 const getBackgroundColors = (accentColor: string | undefined, theme: ThemeColors) => {
-  return accentColor && chroma.valid(accentColor)
+  return accentColor && isValidColor(accentColor)
     ? {
         enabledColor: accentColor,
         disabledColor: theme.colorBgButtonSoftNeutralHover,

package/src/toggle.tsx

@@ -1,11 +1,11 @@
 import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
-import chroma from "chroma-js";
 import {ComponentProps, FC, ReactNode} from "react";
 import {space, textStyles, transition} from "./design-system";
-import _ from "lodash";
+import memoize from "lodash/memoize";
 import SpinnerIcon from "./icons/react/Spinner";
 import {mobileRootSelector} from "./mobile-styles";
+import {darkenChroma, getAlpha, produceColor, setAlpha} from "./color-utils";
 
 const toggleIconHeightVar = "--fibery-toggle-icon-height";
 const toggleIconWidthVar = "--fibery-toggle-icon-width";
@@ -48,14 +48,12 @@ const labelWrapperStyle = css`
   align-items: center;
 `;
 
-const getOutlineColor = _.memoize((color: string) => {
-  const alpha = chroma(color).alpha();
+const getOutlineColor = memoize((color: string) => {
+  const alpha = getAlpha(color);
   if (alpha < 1) {
-    return chroma(color)
-      .alpha(alpha + 0.3)
-      .css();
+    return produceColor(color, (c) => setAlpha(c, Math.min(1, alpha + 0.3)));
   } else {
-    return chroma(color).darken(1).css();
+    return produceColor(color, (c) => darkenChroma(c, 1));
   }
 });
 
@@ -124,6 +122,7 @@ type ToggleProps = Omit<ComponentProps<"input">, "value" | "size"> & {
   size?: ToggleSize;
 };
 
+/** @deprecated implementation detail */
 export const Toggle: FC<ToggleProps> = ({
   value,
   label,

package/src/tooltip.tsx

@@ -2,7 +2,9 @@ import {css, cx} from "@linaria/core";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import {forwardRef, type ReactNode, type SyntheticEvent} from "react";
 import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./design-system";
+import {RadixPortalThemeProvider} from "./theme-provider";
 
+// FIXME consolidate as common util
 const isFlagPresent = (flag: string) => new RegExp(`[?&]${flag}\\b`).test(window.location.search);
 
 const preventDefaultAndStopPropagation = (e: SyntheticEvent) => {
@@ -204,16 +206,18 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
           {children}
         </TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal container={container}>
-          <TooltipPrimitive.Content
-            ref={setContentElement}
-            side={side}
-            sideOffset={sideOffset}
-            align={align}
-            alignOffset={alignOffset}
-            className={cx(tooltipStyle, whiteBg && whiteBgStyle, tooltipContentStyle)}
-          >
-            {content}
-          </TooltipPrimitive.Content>
+          <RadixPortalThemeProvider>
+            <TooltipPrimitive.Content
+              ref={setContentElement}
+              side={side}
+              sideOffset={sideOffset}
+              align={align}
+              alignOffset={alignOffset}
+              className={cx(tooltipStyle, whiteBg && whiteBgStyle, tooltipContentStyle)}
+            >
+              {content}
+            </TooltipPrimitive.Content>
+          </RadixPortalThemeProvider>
         </TooltipPrimitive.Portal>
       </TooltipPrimitive.Root>
     );

package/src/type-badge.tsx

@@ -1,18 +1,17 @@
 import {css} from "@linaria/core";
 import cx from "classnames";
-import _ from "lodash";
+import isString from "lodash/isString";
 import {CSSProperties, forwardRef, memo, ReactNode} from "react";
 import {a11yColor} from "./a11y-color";
 import {
   border,
-  colors,
   fontWeight,
   getDarkenColor,
   getTextColor,
-  getThemeValue,
   opacity,
   space,
   textStyles,
+  themeVars,
   transition,
 } from "./design-system";
 import {useTheme} from "./theme-provider";
@@ -180,7 +179,7 @@ export const TypeBadge = memo(
   ) {
     const TagName = onClick ? "button" : "div";
     const title =
-      _.isString(children) && abbr ? (
+      isString(children) && abbr ? (
         noTooltip ? (
           makeAbbreviation(children)
         ) : (
@@ -196,13 +195,9 @@ export const TypeBadge = memo(
 
     const baseColor = color || theme.iconColor;
 
-    const textBadgeColor = getThemeValue(theme.mode, {
-      dark: a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12),
-      light: a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12),
-      light2: a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12),
-    });
+    const textBadgeColor = a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12);
 
-    const backgroundBadgeColor = getThemeValue(theme.mode, {
+    const backgroundBadgeColor = theme.select({
       dark: getDarkenColor(baseColor),
       light: baseColor,
       light2: baseColor,
@@ -210,10 +205,8 @@ export const TypeBadge = memo(
 
     const resultingStyle = {
       ...style,
-      [colorProp]: baseColor ? textBadgeColor : colors.inversedTextColor,
-      //[colorProp]: baseColor ? getTextColor(baseColor) : colors.inversedTextColor,
-      [colorBackgroundProp]: backgroundBadgeColor || colors.shades.opacity25,
-      //[colorBackgroundProp]: baseColor || colors.shades.opacity25,
+      [colorProp]: baseColor ? textBadgeColor : themeVars.inversedTextColor,
+      [colorBackgroundProp]: backgroundBadgeColor || themeVars.shades.opacity25,
       [colorBorderProp]: backgroundBadgeColor,
       [colorDarkProp]: getDarkenColor(baseColor),
     } as CSSProperties;