@fibery/ui-kit 1.40.4 → 1.41.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @fibery/ui-kit
 
+## 1.41.0
+
+### Minor Changes
+
+- 6139f68: ThemePalette, design-system restructuring
+
 ## 1.40.4
 
 ### Patch Changes

package/eslint.config.mjs

@@ -0,0 +1,16 @@
+import baseConfig from "@fibery/eslint-config";
+
+export default [
+  ...baseConfig,
+  {
+    rules: {
+      "no-restricted-imports": ["error", {patterns: ["@fibery/ui-kit/*"]}],
+    },
+  },
+  {
+    files: ["src/icons/**/*"],
+    rules: {
+      "unicorn/filename-case": "off",
+    },
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.40.4",
+  "version": "1.41.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -10,6 +10,7 @@
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-context-menu": "2.2.1",
     "@radix-ui/react-dropdown-menu": "2.1.1",
+    "@radix-ui/react-focus-scope": "^1.1.8",
     "@radix-ui/react-navigation-menu": "1.2.1",
     "@radix-ui/react-slot": "1.2.4",
     "@radix-ui/react-toast": "1.2.2",
@@ -20,7 +21,7 @@
     "@types/react-select-country-list": "^2.2.3",
     "@types/setimmediate": "^1.0.4",
     "antd": "4.24.7",
-    "chrono-node": "^2.7.5",
+    "chrono-node": "^2.9.0",
     "classnames": "2.3.1",
     "cmdk": "1.0.0",
     "color-hash": "1.0.3",
@@ -42,7 +43,7 @@
     "react-popper": "2.3.0",
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
-    "react-virtuoso": "4.14.1",
+    "react-virtuoso": "4.18.1",
     "screenfull": "6.0.2",
     "tabbable": "5.2.1",
     "@fibery/emoji-data": "2.7.1",
@@ -81,7 +82,7 @@
     "typescript": "5.9.3",
     "unist-util-reduce": "0.2.2",
     "@fibery/babel-preset": "7.4.1",
-    "@fibery/eslint-config": "8.6.2"
+    "@fibery/eslint-config": "9.0.0"
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -97,8 +98,7 @@
       "cobertura"
     ],
     "moduleNameMapper": {
-      "\\.(css)$": "<rootDir>/src/__mocks__/styleMock.js",
-      "createInlineTheme\\.js$": "<rootDir>/src/__mocks__/createInlineTheme.js"
+      "\\.(css)$": "<rootDir>/src/__mocks__/styleMock.js"
     },
     "transform": {
       "^.+\\.(js|jsx|ts|tsx)$": [
@@ -129,6 +129,7 @@
     "test:ci": "pnpm run test --reporters=default --reporters=jest-junit",
     "test:coverage": "pnpm run test --coverage --coverageDirectory=${JEST_COVERAGE_RESULT_DIR:-$(pwd)}/coverage/ui-kit --reporters=default --reporters=jest-junit",
     "lint": "eslint .",
-    "generate-icons": "node scripts/generate-icons.mjs"
+    "generate-icons": "node scripts/generate-icons.mjs",
+    "typecheck": "tsc --noEmit"
   }
 }

package/src/a11y-color.test.ts

@@ -11,27 +11,27 @@ describe("a11yColor", () => {
     it("color already passes contrast on dark background", () => {
       // White on black should already pass
       const result = a11yColor("#ffffff", "#000000");
-      expect(result).toBe("rgb(255,255,255)");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,255,255)"`);
     });
 
     it("invalid toMakeA11y color is provided", () => {
       const result = a11yColor("invalid-color", "#ffffff");
-      expect(result).toBe("invalid-color");
+      expect(result).toMatchInlineSnapshot(`"invalid-color"`);
     });
 
     it("invalid background color is provided", () => {
       const result = a11yColor("#ff0000", "invalid-bg");
-      expect(result).toBe("#ff0000");
+      expect(result).toMatchInlineSnapshot(`"#ff0000"`);
     });
 
     it("transparent is provided as toMakeA11y", () => {
       const result = a11yColor("transparent", "#ffffff");
-      expect(result).toBe("transparent");
+      expect(result).toMatchInlineSnapshot(`"transparent"`);
     });
 
     it("transparent is provided as background", () => {
       const result = a11yColor("#ff0000", "transparent");
-      expect(result).toBe("#ff0000");
+      expect(result).toMatchInlineSnapshot(`"#ff0000"`);
     });
   });
 
@@ -40,16 +40,12 @@ describe("a11yColor", () => {
       // Light yellow on white needs to be darker
       const result = a11yColor("#ffff00", "#ffffff");
       expect(result).toMatchInlineSnapshot(`"rgb(154,154,0)"`);
-      // Result should be different (darker) than input
-      expect(result).not.toBe("rgb(255,255,0)");
     });
 
     it("makes dark color lighter on black background", () => {
       // Dark blue on black needs to be lighter
       const result = a11yColor("#000033", "#000000");
       expect(result).toMatchInlineSnapshot(`"rgb(49,49,255)"`);
-      // Result should be different (lighter) than input
-      expect(result).not.toBe("rgb(0,0,51)");
     });
 
     it("handles medium colors on light backgrounds", () => {
@@ -109,21 +105,6 @@ describe("a11yColor", () => {
     });
   });
 
-  describe("caching", () => {
-    it("returns same result for same inputs", () => {
-      const result1 = a11yColor("#ff0000", "#ffffff");
-      const result2 = a11yColor("#ff0000", "#ffffff");
-      expect(result1).toBe(result2);
-    });
-
-    it("returns different results for different contrast ratios", () => {
-      const result1 = a11yColor("#cccccc", "#ffffff", 3.0);
-      const result2 = a11yColor("#cccccc", "#ffffff", 7.0);
-      // Higher contrast requirement may produce different result
-      expect(result1).not.toBe(result2);
-    });
-  });
-
   describe("real-world use cases", () => {
     it("brand green on white background", () => {
       const result = a11yColor("#69AC5E", "#ffffff");

package/src/actions-menu/actions-menu-item.tsx

@@ -12,7 +12,7 @@ import {useTheme} from "../theme-provider";
 import {useIsPhone} from "../use-is-phone";
 import {useActionsMenuContext} from "./contexts/actions-menu-context";
 import {useActiveDangerousRow, useSetActiveDangerousRow} from "./contexts/actions-menu-dangerous-rows";
-import _ from "lodash";
+import noop from "lodash/noop";
 
 const hiddenTextCss = css`
   visibility: hidden;
@@ -55,18 +55,18 @@ export const dangerousItemCss = css`
 export const dangerousConfirmationCss = css`
   &.${rowCss} {
     background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
-    color: ${themeVars.inversedTextColor};
+    color: ${themeVars.whiteColor};
     border-radius: ${border.radius6}px;
 
-    --actions-menu-item-icon-color: ${themeVars.inversedTextColor};
+    --actions-menu-item-icon-color: ${themeVars.whiteColor};
 
     &:hover,
     &[data-highlighted] {
       background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
-      color: ${themeVars.inversedTextColor};
+      color: ${themeVars.whiteColor};
       border-radius: ${border.radius6}px;
 
-      --actions-menu-item-icon-color: ${themeVars.inversedTextColor};
+      --actions-menu-item-icon-color: ${themeVars.whiteColor};
     }
   }
 `;
@@ -95,7 +95,7 @@ const RightCorner = ({shortcut, loading, checked}: {shortcut?: string[]; loading
   const theme = useTheme();
   const isPhone = useIsPhone();
 
-  const shortcuts = _.isArray(shortcut) ? shortcut : shortcut ? [shortcut] : null;
+  const shortcuts = Array.isArray(shortcut) ? shortcut : shortcut ? [shortcut] : null;
 
   return loading || shortcuts || checked ? (
     <div className={cornerCss}>
@@ -218,9 +218,6 @@ const ActionsMenuItemComponent: React.FC<
   );
 });
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
 export const ActionsMenuItem: React.FC<ActionsMenuItemProps> = ({className, ...props}) => {
   const id = useId();
   const activeDangerousRow = useActiveDangerousRow();

package/src/actions-menu/context-actions-menu.tsx

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import noop from "lodash/noop";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {ActionsMenuContextProvider} from "./contexts/actions-menu-context";
 import * as ContextMenu from "../context-menu";
@@ -12,13 +12,14 @@ import {useState} from "react";
 
 export const ContextActionsMenu = ({
   open,
-  onOpenChange = _.noop,
+  onOpenChange = noop,
   trigger,
   children,
   disabled,
   mobileTitle,
   supportsMobile,
   autoFocusOnClose = true,
+  contentStyles,
 }: ActionsMenuProps): JSX.Element => {
   const isPhone = useIsPhone();
   const [isOpen = false, setOpen] = useControllableState({value: open, onChange: onOpenChange});
@@ -31,6 +32,7 @@ export const ContextActionsMenu = ({
         open={open}
         onOpenChange={onOpenChange}
         mobileTitle={mobileTitle}
+        contentStyles={contentStyles}
         supportsMobile
         // Extra div is important here to not loose the original onClick handler
         trigger={<div>{trigger}</div>}
@@ -48,7 +50,10 @@ export const ContextActionsMenu = ({
           {trigger}
         </ContextMenu.Trigger>
         <ContextMenu.Portal>
-          <ContextMenu.Content onCloseAutoFocus={autoFocusOnClose ? undefined : preventDefault}>
+          <ContextMenu.Content
+            className={contentStyles}
+            onCloseAutoFocus={autoFocusOnClose ? undefined : preventDefault}
+          >
             <ActionsMenuDangerousRowsProvider open={isOpen}>{children}</ActionsMenuDangerousRowsProvider>
           </ContextMenu.Content>
         </ContextMenu.Portal>

package/src/ai/model.tsx

@@ -66,7 +66,6 @@ export const Model = ({initialValue, onChange}: Props) => {
       <Tooltip
         // props
         title={`Model: ${item.name}`}
-        // eslint-disable-next-line
         description={item.desc}
         instant
       >

package/src/ai/temperature.tsx

@@ -60,7 +60,6 @@ export const Temperature = ({initialValue, onChange}: Props) => {
       <Tooltip
         // props
         title={`Click to change`}
-        // eslint-disable-next-line
         description={`Model's temperature: ${temperature.toFixed(
           2
         )}. Temperature controls the degree of randomness in generated output. A lower temperature setting will result in more predictable and less creative outputs while a higher temperature setting will result in more unpredictable and more creative outputs.`}

package/src/animated-height-container.tsx

@@ -1,7 +1,7 @@
 import {useSize} from "@fibery/react/src/use-size";
 import React, {ComponentProps, forwardRef, useEffect, useRef, useState} from "react";
 import {duration, transition} from "./design-system";
-import _ from "lodash";
+import noop from "lodash/noop";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 
 type AnimatedHeightContainerProps = ComponentProps<"div"> & {
@@ -12,7 +12,7 @@ type AnimatedHeightContainerProps = ComponentProps<"div"> & {
 
 export const AnimatedHeightContainer = forwardRef<HTMLDivElement, AnimatedHeightContainerProps>(
   function AnimatedHeightContainerComponent(
-    {className, noAnimation = false, onTransitionStart = _.noop, onTransitionEnd = _.noop, children, ...otherProps},
+    {className, noAnimation = false, onTransitionStart = noop, onTransitionEnd = noop, children, ...otherProps},
     ref
   ) {
     const measuredContainer = useRef<HTMLDivElement | null>(null);
@@ -46,7 +46,7 @@ export const AnimatedHeightContainer = forwardRef<HTMLDivElement, AnimatedHeight
     // Disable scroll so that overflowed contend won't show on focus
     // https://stackoverflow.com/questions/67694101/overflowed-content-is-showing-on-focus
     useEffect(() => {
-      let cleanup = _.noop;
+      let cleanup = noop;
 
       if (animating && containerRef.current) {
         const element = containerRef.current;

package/src/antd/index.tsx

@@ -1,4 +1,7 @@
 import {StyledInput, StyledTextArea} from "./input";
+import {InputProps} from "antd/lib/input";
 
 export const AntInput = StyledInput;
 export const AntTextArea = StyledTextArea;
+
+export type AntInputProps = InputProps;

package/src/antd/input.tsx

@@ -4,7 +4,6 @@ import "antd/lib/input/style/css";
 import {css} from "@linaria/core";
 import {mobileRootSelector} from "../mobile-styles";
 import {opacity, textStyles, themeVars} from "../design-system";
-
 import {inputStyles} from "./styles";
 import {wrapWith} from "./utils";
 

package/src/antd/styles.ts

@@ -3,16 +3,16 @@ import {border, layout, shadows, space, textStyles, themeVars, transition} from
 
 const inputVariables = {
   default: {
-    "--input-border": themeVars.inputBorderColor,
-    "--input-hover-border": `0 0 0 1px ${themeVars.opacity.opacity40}`,
-    "--input-focus-border": `0 0 0 1px ${themeVars.opacity.opacity25}`,
-    "--input-focus-shadow": `0 0 0 3px ${themeVars.focus}`,
+    "--input-border": `${themeVars.inputBorderColor} inset`,
+    "--input-hover-border": `0 0 0 1px ${themeVars.opacity.opacity40} inset`,
+    "--input-focus-border": `0 0 0 1px ${themeVars.opacity.opacity50} inset`,
+    "--input-focus-shadow": `0 0 0 2px ${themeVars.focus}`,
   },
   error: {
-    "--input-border": `0 0 0 1px ${themeVars.warning}`,
-    "--input-hover-border": `0 0 0 1px ${themeVars.warning}`,
-    "--input-focus-border": `0 0 0 1px ${themeVars.warning}`,
-    "--input-focus-shadow": `0 0 0 1px ${themeVars.warning}`,
+    "--input-border": `0 0 0 1px ${themeVars.warning} inset`,
+    "--input-hover-border": `0 0 0 1px ${themeVars.warning} inset`,
+    "--input-focus-border": `0 0 0 1px ${themeVars.warning} inset`,
+    "--input-focus-shadow": `0 0 0 2px ${themeVars.warning}`,
   },
 };
 
@@ -43,7 +43,7 @@ export const inputOverrides = {
     transition: `box-shadow ${transition}`,
   },
   focus: {
-    boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.opacity.opacity25}) !important`,
+    boxShadow: `var(--input-focus-border, 0 0 0 1px ${themeVars.opacity.opacity25}), var(--input-focus-shadow) !important`,
     transition: `box-shadow ${transition}`,
   },
   disabled: {

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 {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,7 +128,7 @@ 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),

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, getOpacities, getThemeValue} from "./design-system";
+import {border, getOpacities} from "./design-system";
 import {useTheme} from "./theme-provider";
 
 interface AppIconProps {
@@ -16,7 +16,7 @@ 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),
@@ -24,7 +24,7 @@ export const AppIcon: FC<AppIconProps> = ({color, icon, containerSize = 54, icon
 
   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/make-button-colors.ts

@@ -3,7 +3,7 @@
 // so it's easier to find buttons with custom colors
 
 import {CSSProperties} from "@linaria/core";
-import {getDarkenColor, getOpacities, getThemeValue, ThemeColors, themeVars} from "../design-system";
+import {getDarkenColor, getOpacities, ThemeColors, themeVars} from "../design-system";
 import {ButtonVariant} from "./base-button";
 
 export const makeButtonColors = (color: string, variant: ButtonVariant, theme: ThemeColors): CSSProperties => {
@@ -40,7 +40,7 @@ export const makeButtonColors = (color: string, variant: ButtonVariant, theme: T
 
       return {
         "--fibery-button-color": bgColor,
-        "--fibery-button-hover-color": getThemeValue(theme.mode, {
+        "--fibery-button-hover-color": theme.select({
           light: getOpacities(color).opacity30,
           dark: getOpacities(color).opacity45,
         }),

package/src/checkbox.tsx

@@ -127,7 +127,7 @@ const checkmarkStyle = css`
   opacity: 0;
   transition: transform 0.2s, opacity 0.2s;
   pointer-events: none;
-  color: ${themeVars.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-utils.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 import {
   fromHSL,
   fromOKLCH,
@@ -8,32 +7,31 @@ import {
   getHsl,
   getLuminance,
   isValidColor,
-  OKLCH,
-  produceColor,
   toCss,
+  toOKLCH,
 } from "./color-utils";
 
 describe("color-utils", () => {
   describe("css", () => {
     it("normalizes hex to rgb", () => {
-      expect(toCss("#ff0000")).toBe("rgb(255,0,0)");
+      expect(toCss("#ff0000")).toMatchInlineSnapshot(`"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)");
+      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)")).toBe("rgba(255,0,0,0.5)");
+      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%)")).toBe("rgb(255,0,0)");
+      expect(toCss("hsl(0, 100%, 50%)")).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
     });
 
     it("returns fallback for invalid color", () => {
-      expect(toCss("invalid")).toBe("rgb(73,120,212)");
+      expect(toCss("invalid")).toMatchInlineSnapshot(`"rgb(73,120,212)"`);
     });
   });
 
@@ -99,12 +97,12 @@ describe("color-utils", () => {
   describe("toCss", () => {
     it("converts to rgb for opaque colors", () => {
       const result = toCss("#ff0000");
-      expect(result).toMatch(/rgb\(255,\s*0,\s*0\)/);
+      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).toMatch(/rgba\(255,\s*0,\s*0,\s*0\.5\)/);
+      expect(result).toMatchInlineSnapshot(`"rgba(255,0,0,0.5)"`);
     });
   });
 
@@ -295,23 +293,15 @@ describe("color-utils", () => {
 
   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)"`
-      );
+      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(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)"`
-      );
+      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)"`);
     });
   });
 });