@fibery/ui-kit 1.40.3 → 1.41.0

package/src/app-icon-with-fallback.tsx

@@ -1,9 +1,9 @@
 import {css} from "@linaria/core";
-import _ from "lodash";
-import {FC, Suspense, lazy} from "react";
+import fromPairs from "lodash/fromPairs";
+import {FC, lazy, Suspense} from "react";
 import {a11yColor} from "./a11y-color";
 import {AppIconWrapper} from "./app-icon-wrapper";
-import {getAppIconBackgroundColor, getOpacities, getThemeValue, iconSize, layout} from "./design-system";
+import {getOpacities, iconSize, layout} from "./design-system";
 import {Icon} from "./icons/Icon";
 import {useTheme} from "./theme-provider";
 import {useIsPhone} from "./use-is-phone";
@@ -89,7 +89,7 @@ type UglyExternalIconProps = Omit<UglyExternalIconImplProps, "appIconsLookup">;
 
 const UglyExternalIcon = lazy(async () => {
   const appIcons = await import("./appIcons.json");
-  const appIconsLookup = _.fromPairs(
+  const appIconsLookup = fromPairs(
     appIcons.default.flatMap((appIcon) => appIcon.short_names.map((shortName) => [shortName, appIcon]))
   );
 
@@ -128,13 +128,13 @@ export const AppIcon: FC<AppIconProps> = ({icon, color, isSelected, ...rest}) =>
   const isPhone = useIsPhone();
   const defaultIconSize = isPhone ? layout.mobileSidebarIconSize : layout.newMenuIconSize;
   const {iconSize = defaultIconSize, containerSize = defaultIconSize} = rest;
-  const iconColor = getThemeValue(theme.mode, {
+  const iconColor = theme.select({
     dark: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
     light: a11yColor(getOpacities(color).opacity95, theme.whiteColor, 3),
     light2: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
   });
 
-  const bgColor = getAppIconBackgroundColor(theme.mode, color);
+  const bgColor = theme.fns.getAppIconBackground(color);
 
   return (
     <AppIconWrapper color={bgColor as string} borderless={isSelected} containerSize={containerSize}>

package/src/app-icon-wrapper.tsx

@@ -1,7 +1,7 @@
 import {css} from "@linaria/core";
 import cn from "classnames";
 import {ReactNode} from "react";
-import {border, getThemeValue, layout} from "./design-system";
+import {border, layout} from "./design-system";
 import {useTheme} from "./theme-provider";
 import {useIsPhone} from "./use-is-phone";
 
@@ -34,8 +34,7 @@ export const AppIconWrapper = ({
       style={{backgroundColor: borderless ? "transparent" : color, width: containerSize, height: containerSize}}
       className={cn(
         appIconContainerStyle,
-        !borderless &&
-          getThemeValue(theme.mode, {light2: appIconGradientStyle, dark: appIconGradientStyle, light: null})
+        !borderless && theme.select({light2: appIconGradientStyle, dark: appIconGradientStyle, light: null})
       )}
     >
       {children}

package/src/app-icon.tsx

@@ -3,7 +3,7 @@ import cx from "classnames";
 import {FC} from "react";
 import {a11yColor} from "./a11y-color";
 import {AppIconWithFallback} from "./app-icon-with-fallback";
-import {border, getAppIconBackgroundColor, getOpacities, getThemeValue} from "./design-system";
+import {border, getOpacities} from "./design-system";
 import {useTheme} from "./theme-provider";
 
 interface AppIconProps {
@@ -16,15 +16,15 @@ interface AppIconProps {
 
 export const AppIcon: FC<AppIconProps> = ({color, icon, containerSize = 54, iconSize = 36, className}) => {
   const theme = useTheme();
-  const iconColor = getThemeValue(theme.mode, {
+  const iconColor = theme.select({
     dark: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
     light: a11yColor(getOpacities(color).opacity95, theme.whiteColor, 3),
     light2: a11yColor(getOpacities(color).opacity95, theme.menuBg, 5),
   });
 
-  const bgColor = getAppIconBackgroundColor(theme.mode, color);
+  const bgColor = theme.fns.getAppIconBackground(color);
 
-  const appIconGradientStyle = getThemeValue(theme.mode, {
+  const appIconGradientStyle = theme.select({
     dark: "linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))",
     light: "none",
     light2: "linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))",

package/src/avatar.tsx

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import _ from "lodash";
+import memoize from "lodash/memoize";
 import {CSSProperties, FC, memo, useCallback, useMemo, useState} from "react";
 import {getDarkenColor, getObjectColorMemoized, textStyles, themeVars} from "./design-system";
 import {FibermojiPlaceholder} from "./fibermoji-placeholder";
@@ -7,7 +7,7 @@ import {getShiftStyle} from "./icons/get-shift-style";
 import {useFeatures} from "./features";
 import {abbreviateName} from "./abbreviate-name";
 
-export const getContainerStyle = _.memoize((containerSize) => {
+export const getContainerStyle = memoize((containerSize) => {
   return {
     width: containerSize,
     height: containerSize,
@@ -22,7 +22,7 @@ const statusIconPositionByIndex = [
   {top: 0, left: 0},
 ];
 
-const getStatusIconStyle = _.memoize(
+const getStatusIconStyle = memoize(
   (size, index): CSSProperties => {
     const iconSize = Math.ceil(size / 2);
     const position = statusIconPositionByIndex[index];

package/src/button/base-button.tsx

@@ -139,7 +139,6 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
         data-variant={variant}
         className={cx(reset, baseButton, className)}
         ref={ref}
-        // eslint-disable-next-line react/button-has-type
         type={type}
         {...buttonProps}
       >

package/src/button/button.tsx

@@ -27,6 +27,7 @@ const button = css`
   justify-content: center;
   font-weight: ${fontWeight.medium};
   white-space: nowrap;
+  touch-action: manipulation;
 `;
 
 const shortcutContainer = css`

package/src/button/make-button-colors.ts

@@ -3,18 +3,10 @@
 // so it's easier to find buttons with custom colors
 
 import {CSSProperties} from "@linaria/core";
-import {
-  getDarkenColor,
-  getEnumBackgroundColor,
-  getIconColor,
-  getOpacities,
-  getThemeValue,
-  themeVars,
-} from "../design-system";
+import {getDarkenColor, getOpacities, ThemeColors, themeVars} from "../design-system";
 import {ButtonVariant} from "./base-button";
-import {ThemeMode} from "../theme-settings";
 
-export const makeButtonColors = (color: string, variant: ButtonVariant, mode: ThemeMode = "light"): CSSProperties => {
+export const makeButtonColors = (color: string, variant: ButtonVariant, theme: ThemeColors): CSSProperties => {
   switch (variant) {
     case "solid":
       return {
@@ -43,12 +35,12 @@ export const makeButtonColors = (color: string, variant: ButtonVariant, mode: Th
       };
     default:
     case "soft": {
-      const bgColor = getEnumBackgroundColor(mode, color) as string;
-      const textColor = getIconColor(mode, color) as string;
+      const bgColor = theme.fns.getEnumBackground(color) as string;
+      const textColor = theme.fns.getIconColor(color) as string;
 
       return {
         "--fibery-button-color": bgColor,
-        "--fibery-button-hover-color": getThemeValue(mode, {
+        "--fibery-button-hover-color": theme.select({
           light: getOpacities(color).opacity30,
           dark: getOpacities(color).opacity45,
         }),

package/src/checkbox.tsx

@@ -12,7 +12,7 @@ import {
   useEffect,
   useRef,
 } from "react";
-import {colors, getDarkenColor, getOpacities, layout, space, textStyles, ThemeColors, themeVars} from "./design-system";
+import {getDarkenColor, getOpacities, layout, space, textStyles, ThemeColors, themeVars} from "./design-system";
 import {smallHtmlStylesClass} from "./html-styles";
 import {mobileRootSelector} from "./mobile-styles";
 
@@ -127,7 +127,7 @@ const checkmarkStyle = css`
   opacity: 0;
   transition: transform 0.2s, opacity 0.2s;
   pointer-events: none;
-  color: ${colors.inversedTextColor};
+  color: ${themeVars.whiteColor};
   width: ${layout.checkboxSize}px;
   height: ${layout.checkboxSize}px;
 

package/src/collapsible-section.tsx

@@ -1,7 +1,7 @@
 import {css, cx} from "@linaria/core";
 import ArrowBottom from "./icons/react/ArrowBottom";
 import ArrowTop from "./icons/react/ArrowTop";
-import {ReactNode, useCallback} from "react";
+import {ReactNode, useCallback, useEffect, useRef} from "react";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {space} from "./design-system";
 
@@ -48,6 +48,16 @@ export const CollapsibleSection = ({
 
   const onToggle = useCallback(() => setIsCollapsed(!isCollapsed), [isCollapsed, setIsCollapsed]);
 
+  // Ugly one-time auto-expand logic, in case of collapsedDefault is changed from false to true shortly after render
+  // (i.e. when something is loaded asynchronously)
+  const expandedOnce = useRef(false);
+  useEffect(() => {
+    if (isCollapsed && !collapsedDefault && !expandedOnce.current) {
+      expandedOnce.current = true;
+      setIsCollapsed(false);
+    }
+  }, [isCollapsed, collapsedDefault, setIsCollapsed]);
+
   const collapsibleHeader = (
     <div
       tabIndex={0}

package/src/color-picker/ColorPickerOrLoader.js

@@ -1,10 +1,10 @@
-import {colors, border, space} from "../design-system";
 import {css} from "@linaria/core";
 import {lazy, Suspense} from "react";
+import {border, space, themeVars} from "../design-system";
 
 const colorPickerLoaderStyle = css`
   ${{
-    backgroundColor: colors.inversedTextColor,
+    backgroundColor: themeVars.inversedTextColor,
     borderRadius: border.radius4,
     boxShadow: "rgba(0, 0, 0, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 8px 16px",
     padding: space.s12,

package/src/color-utils.test.ts

@@ -0,0 +1,307 @@
+import {
+  fromHSL,
+  fromOKLCH,
+  getAlpha,
+  getColorDistance,
+  getContrastRatio,
+  getHsl,
+  getLuminance,
+  isValidColor,
+  toCss,
+  toOKLCH,
+} from "./color-utils";
+
+describe("color-utils", () => {
+  describe("css", () => {
+    it("normalizes hex to rgb", () => {
+      expect(toCss("#ff0000")).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+
+    it("normalizes named colors to rgb", () => {
+      expect(toCss("red")).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+      expect(toCss("blue")).toMatchInlineSnapshot(`"rgb(0,0,255)"`);
+    });
+
+    it("preserves alpha in rgba", () => {
+      expect(toCss("rgba(255, 0, 0, 0.5)")).toMatchInlineSnapshot(`"rgba(255,0,0,0.5)"`);
+    });
+
+    it("converts hsl to rgb", () => {
+      expect(toCss("hsl(0, 100%, 50%)")).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+
+    it("returns fallback for invalid color", () => {
+      expect(toCss("invalid")).toMatchInlineSnapshot(`"rgb(73,120,212)"`);
+    });
+  });
+
+  describe("isValidColor", () => {
+    it("returns true for valid hex colors", () => {
+      expect(isValidColor("#ff0000")).toBe(true);
+      expect(isValidColor("#f00")).toBe(true);
+      expect(isValidColor("#FF0000")).toBe(true);
+      expect(isValidColor("#ff000080")).toBe(true);
+    });
+
+    it("returns true for valid rgb/rgba colors", () => {
+      expect(isValidColor("rgb(255, 0, 0)")).toBe(true);
+      expect(isValidColor("rgba(255, 0, 0, 0.5)")).toBe(true);
+      expect(isValidColor("rgb(255,0,0)")).toBe(true);
+    });
+
+    it("returns true for valid hsl/hsla colors", () => {
+      expect(isValidColor("hsl(0, 100%, 50%)")).toBe(true);
+      expect(isValidColor("hsla(0, 100%, 50%, 0.5)")).toBe(true);
+    });
+
+    it("returns true for named colors", () => {
+      expect(isValidColor("red")).toBe(true);
+      expect(isValidColor("blue")).toBe(true);
+      expect(isValidColor("white")).toBe(true);
+      expect(isValidColor("black")).toBe(true);
+      expect(isValidColor("cornflowerblue")).toBe(true);
+    });
+
+    it("returns true for transparent", () => {
+      expect(isValidColor("transparent")).toBe(true);
+    });
+
+    it("returns false for invalid colors", () => {
+      expect(isValidColor("invalid")).toBe(false);
+      expect(isValidColor("not-a-color")).toBe(false);
+      expect(isValidColor("")).toBe(false);
+      expect(isValidColor("#gggggg")).toBe(false);
+    });
+  });
+
+  describe("getAlpha", () => {
+    it("returns 1 for solid colors", () => {
+      expect(getAlpha("#ff0000")).toBe(1);
+    });
+
+    it("returns 1 for solid rgb colors", () => {
+      expect(getAlpha("rgb(255, 0, 0)")).toBe(1);
+    });
+
+    it("returns correct alpha for rgba", () => {
+      expect(getAlpha("rgba(255, 0, 0, 0.5)")).toBeCloseTo(0.5, 2);
+      expect(getAlpha("rgba(255, 0, 0, 0)")).toBe(0);
+      expect(getAlpha("rgba(255, 0, 0, 1)")).toBe(1);
+    });
+
+    it("returns correct alpha for hsla colors", () => {
+      expect(getAlpha("hsla(0, 100%, 50%, 0.7)")).toBeCloseTo(0.7, 2);
+    });
+  });
+
+  describe("toCss", () => {
+    it("converts to rgb for opaque colors", () => {
+      const result = toCss("#ff0000");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+
+    it("converts to rgba for colors with alpha", () => {
+      const result = toCss("rgba(255, 0, 0, 0.5)");
+      expect(result).toMatchInlineSnapshot(`"rgba(255,0,0,0.5)"`);
+    });
+  });
+
+  describe("getContrastRatio", () => {
+    it("returns 21 for black on white", () => {
+      expect(getContrastRatio("#000000", "#ffffff")).toBeCloseTo(21, 0);
+    });
+
+    it("returns 21 for white on black", () => {
+      expect(getContrastRatio("#ffffff", "#000000")).toBeCloseTo(21, 0);
+    });
+
+    it("returns 1 for same colors", () => {
+      expect(getContrastRatio("#808080", "#808080")).toBeCloseTo(1, 0);
+      expect(getContrastRatio("#ff0000", "#ff0000")).toBeCloseTo(1, 0);
+    });
+
+    it("returns symmetric results", () => {
+      const ratio1 = getContrastRatio("#ff0000", "#00ff00");
+      const ratio2 = getContrastRatio("#00ff00", "#ff0000");
+      expect(ratio1).toBeCloseTo(ratio2, 5);
+    });
+
+    it("returns expected values for known pairs", () => {
+      // Red on white should have moderate contrast
+      const redWhite = getContrastRatio("#ff0000", "#ffffff");
+      expect(redWhite).toBeGreaterThan(3);
+      expect(redWhite).toBeLessThan(5);
+    });
+  });
+
+  describe("getColorDistance", () => {
+    it("returns 0 for same colors", () => {
+      expect(getColorDistance("#ff0000", "#ff0000")).toBe(0);
+      expect(getColorDistance("red", "red")).toBe(0);
+    });
+
+    it("returns large value for very different colors", () => {
+      // Red and green are perceptually very different
+      const distance = getColorDistance("#ff0000", "#00ff00");
+      expect(distance).toBeGreaterThan(50);
+    });
+
+    it("returns small value for similar colors", () => {
+      const distance = getColorDistance("#ff0000", "#ff1100");
+      expect(distance).toBeLessThan(10);
+    });
+
+    it("is symmetric", () => {
+      const d1 = getColorDistance("#ff0000", "#0000ff");
+      const d2 = getColorDistance("#0000ff", "#ff0000");
+      expect(d1).toBeCloseTo(d2, 5);
+    });
+  });
+
+  describe("getLuminance", () => {
+    it("returns 1 for white", () => {
+      expect(getLuminance("#ffffff")).toBeCloseTo(1, 2);
+      expect(getLuminance("white")).toBeCloseTo(1, 2);
+    });
+
+    it("returns 0 for black", () => {
+      expect(getLuminance("#000000")).toBeCloseTo(0, 2);
+      expect(getLuminance("black")).toBeCloseTo(0, 2);
+    });
+
+    it("returns ~0.5 for middle gray", () => {
+      // Note: luminance is perceptual, not linear
+      // Middle gray (#808080) has luminance ~0.216
+      expect(getLuminance("#808080")).toBeGreaterThan(0.1);
+      expect(getLuminance("#808080")).toBeLessThan(0.3);
+    });
+
+    it("returns values between 0 and 1", () => {
+      expect(getLuminance("#ff0000")).toBeGreaterThanOrEqual(0);
+      expect(getLuminance("#ff0000")).toBeLessThanOrEqual(1);
+      expect(getLuminance("#00ff00")).toBeGreaterThanOrEqual(0);
+      expect(getLuminance("#00ff00")).toBeLessThanOrEqual(1);
+    });
+  });
+
+  describe("hsl", () => {
+    it("creates red at hue 0", () => {
+      expect(fromHSL(0, 1, 0.5)).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+
+    it("creates green at hue 120", () => {
+      const color = fromHSL(120, 1, 0.5);
+      expect(color).toMatchInlineSnapshot(`"rgb(0,255,0)"`);
+    });
+
+    it("creates blue at hue 240", () => {
+      const color = fromHSL(240, 1, 0.5);
+      expect(color).toMatchInlineSnapshot(`"rgb(0,0,255)"`);
+    });
+
+    it("creates white at lightness 1", () => {
+      const color = fromHSL(0, 1, 1);
+      expect(color).toMatchInlineSnapshot(`"rgb(255,255,255)"`);
+    });
+
+    it("creates black at lightness 0", () => {
+      const color = fromHSL(0, 1, 0);
+      expect(color).toMatchInlineSnapshot(`"rgb(0,0,0)"`);
+    });
+
+    it("creates gray at saturation 0", () => {
+      const color = fromHSL(0, 0, 0.5);
+      expect(color).toMatchInlineSnapshot(`"rgb(128,128,128)"`);
+    });
+  });
+
+  describe("fromLCH (OKLCH)", () => {
+    it("creates color from OKLCH values", () => {
+      expect(fromOKLCH(0.592, 0.16, 264)).toMatchInlineSnapshot(`"rgb(76,120,220)"`);
+    });
+
+    it("creates white at L=1 with zero chroma", () => {
+      expect(fromOKLCH(1, 0, 0)).toMatchInlineSnapshot(`"rgb(255,255,255)"`);
+    });
+
+    it("creates black at L=0", () => {
+      expect(fromOKLCH(0, 0, 0)).toMatchInlineSnapshot(`"rgb(0,0,0)"`);
+    });
+
+    it("creates gray at mid-lightness with zero chroma", () => {
+      expect(fromOKLCH(0.5, 0, 0)).toMatchInlineSnapshot(`"rgb(99,99,99)"`);
+    });
+
+    it("creates saturated red at hue ~29", () => {
+      expect(fromOKLCH(0.628, 0.258, 29)).toMatchInlineSnapshot(`"rgb(255,0,3)"`);
+    });
+
+    it("creates saturated blue at hue ~264", () => {
+      expect(fromOKLCH(0.452, 0.313, 264)).toMatchInlineSnapshot(`"rgb(0,1,255)"`);
+    });
+
+    it("higher chroma produces more saturated colors", () => {
+      expect(fromOKLCH(0.6, 0.05, 264)).toMatchInlineSnapshot(`"rgb(113,128,159)"`);
+      expect(fromOKLCH(0.6, 0.2, 264)).toMatchInlineSnapshot(`"rgb(64,118,245)"`);
+    });
+
+    it("gamut maps out-of-range colors", () => {
+      expect(fromOKLCH(0.7, 0.4, 150)).toMatchInlineSnapshot(`"rgb(0,194,72)"`);
+      expect(fromOKLCH(0.8, 0.4, 150)).toMatchInlineSnapshot(`"rgb(0,231,90)"`);
+      expect(fromOKLCH(0.9, 0.4, 150)).toMatchInlineSnapshot(`"rgb(65,255,135)"`);
+      expect(fromOKLCH(1, 0.4, 150)).toMatchInlineSnapshot(`"rgb(255,255,255)"`);
+    });
+  });
+
+  describe("getHsl", () => {
+    it("extracts HSL from red", () => {
+      const [h, s, l] = getHsl("#ff0000");
+      expect(h).toBeCloseTo(0, 0);
+      expect(s).toBeCloseTo(1, 2);
+      expect(l).toBeCloseTo(0.5, 2);
+    });
+
+    it("extracts HSL from green", () => {
+      const [h, s, l] = getHsl("#00ff00");
+      expect(h).toBeCloseTo(120, 0);
+      expect(s).toBeCloseTo(1, 2);
+      expect(l).toBeCloseTo(0.5, 2);
+    });
+
+    it("extracts HSL from blue", () => {
+      const [h, s, l] = getHsl("#0000ff");
+      expect(h).toBeCloseTo(240, 0);
+      expect(s).toBeCloseTo(1, 2);
+      expect(l).toBeCloseTo(0.5, 2);
+    });
+
+    it("extracts HSL from white", () => {
+      const [, , l] = getHsl("#ffffff");
+      expect(l).toBeCloseTo(1, 2);
+    });
+
+    it("extracts HSL from black", () => {
+      const [, l] = getHsl("#000000");
+      expect(l).toBeCloseTo(0, 2);
+    });
+
+    it("returns 0 for undefined hue (grayscale)", () => {
+      const [h] = getHsl("#808080");
+      expect(h).toBe(0); // NaN converted to 0
+    });
+  });
+
+  describe("produceColor", () => {
+    it("outputs oklch format when OKLCH space is specified", () => {
+      expect(toOKLCH("#ff0000")).toMatchInlineSnapshot(`"oklch(62.796% 0.25768 29.234)"`);
+      expect(toOKLCH("rgb(0, 128, 255)")).toMatchInlineSnapshot(`"oklch(61.517% 0.21082 256.1)"`);
+      expect(toOKLCH("oklch(61.517% 0.21082 256.1)")).toMatchInlineSnapshot(`"oklch(61.517% 0.21082 256.1)"`);
+    });
+
+    it("parses display-p3 colors correctly (P3 space removed for bundle size)", () => {
+      expect(toOKLCH("color(display-p3 0.992 0.992 0.978)")).toMatchInlineSnapshot(`"oklch(99.285% 0.00516 106.49)"`);
+      expect(toOKLCH("color(display-p3 0.995 0.99 0.922)")).toMatchInlineSnapshot(`"oklch(98.841% 0.02505 102.92)"`);
+      expect(toOKLCH("color(display-p3 0.997 0.982 0.749)")).toMatchInlineSnapshot(`"oklch(97.402% 0.08449 104.36)"`);
+    });
+  });
+});