@fibery/ui-kit 1.40.2 → 1.40.4

package/src/color-utils.test.ts

@@ -0,0 +1,317 @@
+/* eslint-disable max-lines */
+import {
+  fromHSL,
+  fromOKLCH,
+  getAlpha,
+  getColorDistance,
+  getContrastRatio,
+  getHsl,
+  getLuminance,
+  isValidColor,
+  OKLCH,
+  produceColor,
+  toCss,
+} from "./color-utils";
+
+describe("color-utils", () => {
+  describe("css", () => {
+    it("normalizes hex to rgb", () => {
+      expect(toCss("#ff0000")).toBe("rgb(255,0,0)");
+    });
+
+    it("normalizes named colors to rgb", () => {
+      expect(toCss("red")).toBe("rgb(255,0,0)");
+      expect(toCss("blue")).toBe("rgb(0,0,255)");
+    });
+
+    it("preserves alpha in rgba", () => {
+      expect(toCss("rgba(255, 0, 0, 0.5)")).toBe("rgba(255,0,0,0.5)");
+    });
+
+    it("converts hsl to rgb", () => {
+      expect(toCss("hsl(0, 100%, 50%)")).toBe("rgb(255,0,0)");
+    });
+
+    it("returns fallback for invalid color", () => {
+      expect(toCss("invalid")).toBe("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).toMatch(/rgb\(255,\s*0,\s*0\)/);
+    });
+
+    it("converts to rgba for colors with alpha", () => {
+      const result = toCss("rgba(255, 0, 0, 0.5)");
+      expect(result).toMatch(/rgba\(255,\s*0,\s*0,\s*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(produceColor("#ff0000", [], OKLCH)).toMatchInlineSnapshot(`"oklch(62.796% 0.25768 29.234)"`);
+      expect(produceColor("rgb(0, 128, 255)", [], OKLCH)).toMatchInlineSnapshot(`"oklch(61.517% 0.21082 256.1)"`);
+      expect(produceColor("oklch(61.517% 0.21082 256.1)", [], OKLCH)).toMatchInlineSnapshot(
+        `"oklch(61.517% 0.21082 256.1)"`
+      );
+    });
+
+    it("parses display-p3 colors correctly (P3 space removed for bundle size)", () => {
+      expect(produceColor("color(display-p3 0.992 0.992 0.978)", [], OKLCH)).toMatchInlineSnapshot(
+        `"oklch(99.285% 0.00516 106.49)"`
+      );
+      expect(produceColor("color(display-p3 0.995 0.99 0.922)", [], OKLCH)).toMatchInlineSnapshot(
+        `"oklch(98.841% 0.02505 102.92)"`
+      );
+      expect(produceColor("color(display-p3 0.997 0.982 0.749)", [], OKLCH)).toMatchInlineSnapshot(
+        `"oklch(97.402% 0.08449 104.36)"`
+      );
+    });
+  });
+});

package/src/color-utils.ts

@@ -0,0 +1,180 @@
+import type {ColorConstructor, Coords, PlainColorObject} from "colorjs.io/fn";
+import {
+  ColorSpace,
+  contrastWCAG21,
+  deltaE76,
+  getLuminance as getLuminanceUnsafe,
+  HSL,
+  Lab,
+  LCH,
+  mix,
+  OKLCH,
+  P3,
+  parse,
+  serialize,
+  set,
+  sRGB,
+  to,
+  toGamut,
+} from "colorjs.io/fn";
+
+ColorSpace.register(sRGB);
+ColorSpace.register(HSL);
+ColorSpace.register(Lab);
+ColorSpace.register(LCH);
+ColorSpace.register(OKLCH);
+ColorSpace.register(P3);
+
+type Color = PlainColorObject | ColorConstructor;
+
+function colorSafe(color: string, fallback = "#4978D4"): Color {
+  try {
+    return parse(color);
+  } catch {
+    return parse(fallback);
+  }
+}
+
+const coords = (a: number, b: number, c: number): Coords => [a, b, c];
+const clamp01 = (v: number | null): number => Math.max(0, Math.min(1, v ?? 0));
+const white: PlainColorObject = {space: sRGB, coords: [1, 1, 1], alpha: 1};
+const black: PlainColorObject = {space: sRGB, coords: [0, 0, 0], alpha: 1};
+
+function serializesRGB(color: Color): string {
+  const rgb = toGamut(to(color, sRGB), {space: sRGB});
+  const r = Math.round(clamp01(rgb.coords[0]) * 255);
+  const g = Math.round(clamp01(rgb.coords[1]) * 255);
+  const b = Math.round(clamp01(rgb.coords[2]) * 255);
+  const a = rgb.alpha ?? 1;
+  return a < 1 ? `rgba(${r},${g},${b},${a})` : `rgb(${r},${g},${b})`;
+}
+
+type ColorTransform = (color: PlainColorObject) => PlainColorObject | void;
+
+export function produceColor(color: string, transforms: ColorTransform | ColorTransform[], space?: ColorSpace): string {
+  let c = to(colorSafe(color), sRGB);
+  for (const transform of Array.isArray(transforms) ? transforms : [transforms]) {
+    const result = transform(c);
+    if (result !== undefined) {
+      c = result;
+    }
+  }
+  // TODO make sRGB default space and apply colorjs.io outputs CSS Level 4 format (rgb(100% 0% 0%))
+  //  instead of compatible format (rgb(255,0,0))
+  if (space === undefined) {
+    return serializesRGB(c);
+  }
+  return serialize(to(c, space));
+}
+
+/**
+ * @deprecated chroma-js compatibility artifact, try using newer apis
+ * Set relative luminance by binary-search interpolation toward white/black in sRGB.
+ * This targets relative luminance (Y in XYZ), not perceptual lightness.
+ */
+export function setLuminanceChroma(color: PlainColorObject, target: number): PlainColorObject {
+  const curLum = getLuminanceUnsafe(color);
+  if (Math.abs(curLum - target) < 1e-7) {
+    return color;
+  }
+
+  const endpoint = target > curLum ? white : black;
+  let lo = 0;
+  let hi = 1;
+
+  for (let i = 0; i < 12; i++) {
+    const mid = (lo + hi) / 2;
+    const lum = getLuminanceUnsafe(mix(color, endpoint, mid, {space: sRGB}));
+    if (target > curLum ? lum < target : lum > target) {
+      lo = mid;
+    } else {
+      hi = mid;
+    }
+  }
+
+  const result = mix(color, endpoint, (lo + hi) / 2, {space: sRGB});
+  result.alpha = color.alpha ?? 1;
+  return result;
+}
+
+/**
+ * @deprecated chroma-js compatibility artifact, try using newer apis
+ * Darken by reducing L* in Lab color space using colorjs.io set().
+ * Matches chroma-js: darken(1) reduces Lab L* by 18 units.
+ * Negative L* values are handled by toGamut during serialization.
+ */
+export function darkenChroma(color: PlainColorObject, amount: number): PlainColorObject {
+  return set(color, "lab.l", (l) => l - amount * 18);
+}
+
+/**
+ * @deprecated chroma-js compatibility artifact, try using newer apis
+ * Desaturate by reducing C (chroma) in LCH color space using colorjs.io set().
+ * Matches chroma-js: desaturate(1) reduces LCH C by 18 units.
+ * Negative C values are handled by toGamut during serialization.
+ */
+export function desaturateChroma(color: PlainColorObject, amount: number): PlainColorObject {
+  return set(color, "lch.c", (c) => c - amount * 18);
+}
+
+export function setAlpha(color: PlainColorObject, value: number): void {
+  color.alpha = value;
+}
+
+export function isValidColor(color: string): boolean {
+  if (color === "transparent") {
+    return true;
+  }
+  try {
+    parse(color);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function getAlpha(color: string): number {
+  return colorSafe(color).alpha ?? 1;
+}
+
+export function getContrastRatio(color1: string, color2: string): number {
+  return contrastWCAG21(colorSafe(color1), colorSafe(color2));
+}
+
+export function getColorDistance(color1: string, color2: string): number {
+  return deltaE76(colorSafe(color1), colorSafe(color2));
+}
+
+export function getLuminance(color: string): number {
+  return getLuminanceUnsafe(colorSafe(color));
+}
+
+export function fromHSL(h: number, s: number, l: number): string {
+  return serializesRGB({space: HSL, coords: coords(h, s * 100, l * 100), alpha: null});
+}
+
+export function fromOKLCH(L: number, C: number, H: number, alpha = 1): string {
+  return serializesRGB({space: OKLCH, coords: [L, C, H] as [number, number, number], alpha});
+}
+
+export function toOKLCH(color: string) {
+  return produceColor(color, [], OKLCH);
+}
+
+export function getHsl(color: string): [number, number, number] {
+  const c = to(colorSafe(color), HSL);
+  return [c.coords[0] || 0, (c.coords[1] || 0) / 100, (c.coords[2] || 0) / 100];
+}
+
+/** @deprecated do not use that, chroma-js compatibility */
+export function clampRgb(color: PlainColorObject): PlainColorObject {
+  const rgb = to(color, sRGB);
+  rgb.coords = rgb.coords.map(clamp01) as Coords;
+  return rgb;
+}
+
+export function toCss(color: string): string {
+  return produceColor(color, []);
+}
+
+export {ColorSpace, mix, OKLCH, parse, set, sRGB, to, HSL, Lab, LCH};

package/src/comment.tsx

@@ -6,7 +6,7 @@ import {border, iconSize, space, textStyles, themeVars, transition} from "./desi
 import {formatDateFromNow} from "./format-date-from-now";
 import {LoadingSausage, LoadingSausageList} from "./loading-sausage";
 import {Tooltip} from "./tooltip";
-import {isMobile} from "./platform";
+import {useIsPhone} from "./use-is-phone";
 
 export const commentContentStyle = css`
   ${{
@@ -115,6 +115,7 @@ export const Comment = memo(
 
     const {formatted, relative} = formatDateFromNow(date, {format: dateTimeFormat});
     const IconComponent = icon ? icon : null;
+    const isPhone = useIsPhone();
     return (
       <div
         ref={ref}
@@ -153,7 +154,7 @@ export const Comment = memo(
             <div
               className={cx(
                 actionsClassName,
-                (actionsShowed || isMobile) &&
+                (actionsShowed || isPhone) &&
                   css`
                     display: flex;
                   `

package/src/context-menu/index.tsx

@@ -4,6 +4,7 @@ import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import {forwardRef} from "react";
 import {border, layout, space, textStyles, themeVars} from "../design-system";
 import {mobileRootSelector} from "../mobile-styles";
+import {ThemeProvider} from "../theme-provider";
 
 export const Root = (contextMenuProps: ContextMenuPrimitive.ContextMenuProps) => (
   <ContextMenuPrimitive.Root dir="ltr" {...contextMenuProps} />
@@ -94,12 +95,14 @@ export type ContentProps = ContextMenuPrimitive.ContextMenuContentProps;
 export const Content = forwardRef<HTMLDivElement, ContentProps>(function ContextMenuContent({className, ...rest}, ref) {
   return (
     <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        ref={ref}
-        className={cx(dropdownMenuContentStyles, className)}
-        collisionPadding={space.s12 + space.s8}
-        {...rest}
-      />
+      <ThemeProvider portal>
+        <ContextMenuPrimitive.Content
+          ref={ref}
+          className={cx(dropdownMenuContentStyles, className)}
+          collisionPadding={space.s12 + space.s8}
+          {...rest}
+        />
+      </ThemeProvider>
     </ContextMenuPrimitive.Portal>
   );
 });
@@ -132,7 +135,9 @@ export const SubContent = forwardRef<HTMLDivElement, ContextMenuPrimitive.Contex
   function DropdownMenuSubContent({className, ...rest}, ref) {
     return (
       <ContextMenuPrimitive.Portal>
-        <ContextMenuPrimitive.SubContent ref={ref} className={cx(dropdownMenuContentStyles, className)} {...rest} />
+        <ThemeProvider portal>
+          <ContextMenuPrimitive.SubContent ref={ref} className={cx(dropdownMenuContentStyles, className)} {...rest} />
+        </ThemeProvider>
       </ContextMenuPrimitive.Portal>
     );
   }

package/src/create-inline-theme.ts

@@ -2,11 +2,19 @@
 // @ts-ignore
 export const varPrefix = process.env.VAR_THEME_PREFIX || "fibery";
 
+export type ThemeStyles = Record<string, string>;
+
 export function createInlineTheme<T extends Record<string, unknown>>(
   themes: T,
   rejectKeys: Array<string>
-): Record<string, string> {
+): ThemeStyles {
   return Object.entries(themes).reduce<Record<string, string>>((inlineTheme, [key, value]) => {
+    if (key === "key") {
+      return inlineTheme;
+    }
+    if (key === "fns") {
+      return inlineTheme;
+    }
     if (rejectKeys.includes(key)) {
       return inlineTheme;
     }
@@ -18,13 +26,6 @@ export function createInlineTheme<T extends Record<string, unknown>>(
 
       return inlineTheme;
     }
-    if (key === "stateColors") {
-      Object.entries(themes.stateColors as Record<string, string>).forEach(([stateColorKey, stateColorValue]) => {
-        inlineTheme[`--${varPrefix}-state-colors-${stateColorKey}`] = stateColorValue;
-      }, "");
-
-      return inlineTheme;
-    }
     if (key === "brandColors") {
       Object.entries(themes.brandColors as Record<string, string>).forEach(([brandColorKey, brandColorValue]) => {
         inlineTheme[`--${varPrefix}-brand-colors-${brandColorKey}`] = brandColorValue;