@fibery/ui-kit 1.40.2 → 1.40.4

package/src/theme-provider.tsx

@@ -1,8 +1,25 @@
 import invariant from "invariant";
-import {themeStyles} from "./theme-styles";
+import {
+  defaultDarkTheme,
+  defaultDarkThemeStyles,
+  defaultLightTheme,
+  defaultLightThemeStyles,
+  defaultPalette,
+  themeStyles,
+} 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,
+  PropsWithChildren,
+  ReactNode,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react";
+import {createInlineTheme, getThemeColors, rejectNoKeys, ThemeColors} from "./design-system";
+import {ThemePalette} from "./palette-generator";
 import {
   subscribeOnThemeMenuPreferenceChange,
   subscribeOnThemeModeChange,
@@ -11,18 +28,29 @@ import {
   ThemeMode,
   ThemePreference,
 } from "./theme-settings";
+import {css} from "@linaria/core";
+import {ThemeStyles} from "./create-inline-theme";
 
-const FiberyThemePreferenceContext = createContext<ThemePreference | null>(null);
-const FiberyThemeMenuPreferenceContext = createContext<ThemeMenuPreference | null>(null);
+const ThemePreferenceContext = createContext<ThemePreference | null>(null);
 
-const FiberyThemeContext = createContext<ThemeColors>(getThemeColors(colors.brandColors.blue, "light"));
+export function useThemePreference(): ThemePreference {
+  const themePreference = useContext(ThemePreferenceContext);
+  invariant(themePreference, `please ensure the component is wrapped in a <RootThemeProvider>`);
+  return themePreference;
+}
+
+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,36 +58,84 @@ export function useThemeMode(): ThemeMode {
   return theme.mode;
 }
 
-export function useThemePreference(): ThemePreference {
-  const themePreference = useContext(FiberyThemePreferenceContext);
-
-  invariant(
-    themePreference,
-    "could not find theme preference context value; please ensure the component is wrapped in a <FiberyThemePreferenceContext>"
-  );
+const RootThemeStylesContext = createContext<ThemeStyles>(defaultLightThemeStyles);
+const ThemeStylesContext = createContext<ThemeStyles>(defaultLightThemeStyles);
 
-  return themePreference;
+export function useThemeStyles(): ThemeStyles {
+  return useContext(ThemeStylesContext);
 }
 
-export function useThemeMenuPreference(): ThemeMenuPreference {
-  const themeMenuPreference = useContext(FiberyThemeMenuPreferenceContext);
+const ThemePaletteContext = createContext<ThemePalette>(defaultPalette);
 
-  invariant(
-    themeMenuPreference,
-    "could not find theme menu preference context value; please ensure the component is wrapped in a <FiberyThemeMenuPreferenceContext>"
-  );
+type ThematicContextValue = {
+  palette: ThemePalette;
+  setPalette: (palette: ThemePalette) => void;
+};
 
-  return themeMenuPreference;
+const ThematicContext = createContext<ThematicContextValue>({
+  palette: defaultPalette,
+  setPalette: () => {},
+});
+
+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 = createInlineTheme(theme, rejectNoKeys);
+  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>
+  );
 }
 
 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({
@@ -74,19 +150,33 @@ export function RootThemeProvider({
   children: ReactNode;
 }): JSX.Element {
   const [themeMode, setThemeMode] = useState<ThemeMode>(initialThemeMode);
+  useEffect(() => subscribeOnThemeModeChange(setThemeMode), []);
+
+  const [palette, setPalette] = useState<ThemePalette>(defaultPalette);
+
+  let res = <ThemeProvider theme={getThemeColors(null, themeMode, palette)}>{children}</ThemeProvider>;
+
+  // Set base context to what global CSS has, so ThemeProvider diffs against it
+  const cssThemeStyles = themeMode === "dark" ? defaultDarkThemeStyles : defaultLightThemeStyles;
+  res = <ThemeStylesContext.Provider value={cssThemeStyles}>{res}</ThemeStylesContext.Provider>;
+  res = <RootThemeStylesContext.Provider value={cssThemeStyles}>{res}</RootThemeStylesContext.Provider>;
+
+  const cssThemeColors = themeMode === "dark" ? defaultDarkTheme : defaultLightTheme;
+  res = <ThemeColorsContext.Provider value={cssThemeColors}>{res}</ThemeColorsContext.Provider>;
+
+  res = <ThemePaletteContext.Provider value={palette}>{res}</ThemePaletteContext.Provider>;
+
+  const thematicContextValue = useMemo<ThematicContextValue>(() => ({palette, setPalette}), [palette]);
+  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,6 +184,7 @@ export function RootThemeProvider({
       documentElement.classList.remove(layoutStyles);
     };
   }, []);
+
   useEffect(() => {
     const darkThemeClassName = "dark-theme";
     const lightThemeAndDarkMenuClassName = "light-theme-and-dark-menu";
@@ -119,33 +210,5 @@ export function RootThemeProvider({
     };
   }, [themeMode]);
 
-  return (
-    <FiberyThemePreferenceContext.Provider value={themePreference}>
-      <FiberyThemeMenuPreferenceContext.Provider value={themeMenuPreference}>
-        <ThemeProvider theme={theme}>{children}</ThemeProvider>
-      </FiberyThemeMenuPreferenceContext.Provider>
-    </FiberyThemePreferenceContext.Provider>
-  );
-}
-
-interface WithThemeModeProps {
-  themeMode: ThemeMode;
-}
-
-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;
+  return res;
 }
-
-export {ThemeProvider};

package/src/theme-settings.ts

@@ -42,7 +42,7 @@ export function getThemeMenuPreference(): ThemeMenuPreference {
   return "auto";
 }
 
-export const alignTheme = (theme: ThemeMode) => {
+export const alignTheme = (theme: ThemeMode): "light" | "dark" => {
   if (theme === "light2") {
     return "light";
   }

package/src/theme-styles.ts

@@ -1,14 +1,21 @@
 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 {createInlineTheme, getThemeColors, themeVars} from "./design-system";
+import {makeDefaultPalette} from "./palette-generator";
+
+export const defaultPalette = makeDefaultPalette();
+
+export const defaultLightTheme = getThemeColors(themeVars.brandColors.blue, "light", defaultPalette);
+export const defaultDarkTheme = getThemeColors(themeVars.brandColors.blue, "dark", defaultPalette);
+
+export const defaultLightThemeStyles = createInlineTheme(defaultLightTheme, []);
+export const defaultDarkThemeStyles = createInlineTheme(defaultDarkTheme, []);
 
 export const themeStyles = css`
   :global() {
     html:root {
-      ${createInlineTheme(lightTheme, [])}
+      ${defaultLightThemeStyles}
       &.dark-theme {
-        ${createInlineTheme(darkTheme, [])}
+        ${defaultDarkThemeStyles}
       }
     }
   }

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/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 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";
@@ -49,13 +49,11 @@ const labelWrapperStyle = css`
 `;
 
 const getOutlineColor = _.memoize((color: string) => {
-  const alpha = chroma(color).alpha();
+  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,6 +2,7 @@ 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 {ThemeProvider} from "./theme-provider";
 
 const isFlagPresent = (flag: string) => new RegExp(`[?&]${flag}\\b`).test(window.location.search);
 
@@ -204,16 +205,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>
+          <ThemeProvider portal>
+            <TooltipPrimitive.Content
+              ref={setContentElement}
+              side={side}
+              sideOffset={sideOffset}
+              align={align}
+              alignOffset={alignOffset}
+              className={cx(tooltipStyle, whiteBg && whiteBgStyle, tooltipContentStyle)}
+            >
+              {content}
+            </TooltipPrimitive.Content>
+          </ThemeProvider>
         </TooltipPrimitive.Portal>
       </TooltipPrimitive.Root>
     );

package/src/type-badge.tsx

@@ -5,7 +5,6 @@ import {CSSProperties, forwardRef, memo, ReactNode} from "react";
 import {a11yColor} from "./a11y-color";
 import {
   border,
-  colors,
   fontWeight,
   getDarkenColor,
   getTextColor,
@@ -13,6 +12,7 @@ import {
   opacity,
   space,
   textStyles,
+  themeVars,
   transition,
 } from "./design-system";
 import {useTheme} from "./theme-provider";
@@ -210,9 +210,9 @@ export const TypeBadge = memo(
 
     const resultingStyle = {
       ...style,
-      [colorProp]: baseColor ? textBadgeColor : colors.inversedTextColor,
+      [colorProp]: baseColor ? textBadgeColor : themeVars.inversedTextColor,
       //[colorProp]: baseColor ? getTextColor(baseColor) : colors.inversedTextColor,
-      [colorBackgroundProp]: backgroundBadgeColor || colors.shades.opacity25,
+      [colorBackgroundProp]: backgroundBadgeColor || themeVars.shades.opacity25,
       //[colorBackgroundProp]: baseColor || colors.shades.opacity25,
       [colorBorderProp]: backgroundBadgeColor,
       [colorDarkProp]: getDarkenColor(baseColor),

package/src/unit/styles.ts

@@ -8,7 +8,7 @@ export const textEllipsisClassName = css`
 `;
 
 export const basicUnitClassName = css`
-  border-radius: ${space.s4 + space.s1}px;
+  border-radius: ${space.s6}px;
   border: none;
 `;
 
@@ -84,7 +84,7 @@ export const borderClassName = css`
     bottom: 0;
     box-shadow: ${themeVars.inputBorderColor} inset;
     mix-blend-mode: ${themeVars.inputBorderBlendMode};
-    border-radius: ${space.s4 + space.s1}px;
+    border-radius: ${space.s6}px;
     pointer-events: none;
   }
 

package/src/unit/unit-with-tooltip.tsx

@@ -13,9 +13,10 @@ type Props = {
   children: React.ReactElement;
   title: React.ReactNode;
   description: React.ReactNode;
+  hidden?: boolean;
 };
 
-export const UnitWithTooltip = ({children, title, description}: Props) => {
+export const UnitWithTooltip = ({children, title, description, hidden}: Props) => {
   const [shouldDisplayTooltip, setShouldDisplayTooltip] = useState(false);
   const unitElementRef = useRef<HTMLDivElement>(null);
   const isHoveredRef = useRef(false);
@@ -57,7 +58,7 @@ export const UnitWithTooltip = ({children, title, description}: Props) => {
 
   return (
     <Tooltip
-      visible={shouldDisplayTooltip}
+      visible={!hidden && shouldDisplayTooltip}
       content={
         <div className={contentCss}>
           <TooltipTitle>{title}</TooltipTitle>

package/src/use-long-press.tsx

@@ -3,7 +3,7 @@ import {$TSFixMe} from "./tsfixme";
 
 function on<T extends Window | Document | HTMLElement | EventTarget>(
   obj: T | null,
-  // eslint-disable-next-line @typescript-eslint/ban-types,@typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-function-type -- DOM API compatibility
   ...args: Parameters<T["addEventListener"]> | [string, Function | null, ...any]
 ): void {
   if (obj && obj.addEventListener) {
@@ -13,7 +13,7 @@ function on<T extends Window | Document | HTMLElement | EventTarget>(
 
 export function off<T extends Window | Document | HTMLElement | EventTarget>(
   obj: T | null,
-  // eslint-disable-next-line @typescript-eslint/ban-types,@typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-function-type -- DOM API compatibility
   ...args: Parameters<T["removeEventListener"]> | [string, Function | null, ...any]
 ): void {
   if (obj && obj.removeEventListener) {