@fibery/ui-kit 1.40.2 → 1.40.4

package/src/a11y-color.test.ts

@@ -0,0 +1,181 @@
+import {a11yColor} from "./a11y-color";
+
+describe("a11yColor", () => {
+  describe("returns original color when", () => {
+    it("color already passes contrast on light background", () => {
+      // Dark blue on white should already pass
+      const result = a11yColor("#000080", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(0,0,128)"`);
+    });
+
+    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)");
+    });
+
+    it("invalid toMakeA11y color is provided", () => {
+      const result = a11yColor("invalid-color", "#ffffff");
+      expect(result).toBe("invalid-color");
+    });
+
+    it("invalid background color is provided", () => {
+      const result = a11yColor("#ff0000", "invalid-bg");
+      expect(result).toBe("#ff0000");
+    });
+
+    it("transparent is provided as toMakeA11y", () => {
+      const result = a11yColor("transparent", "#ffffff");
+      expect(result).toBe("transparent");
+    });
+
+    it("transparent is provided as background", () => {
+      const result = a11yColor("#ff0000", "transparent");
+      expect(result).toBe("#ff0000");
+    });
+  });
+
+  describe("adjusts colors for contrast", () => {
+    it("makes light color darker on white background", () => {
+      // 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", () => {
+      // Medium gray on white
+      const result = a11yColor("#808080", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(128,128,128)"`);
+    });
+
+    it("handles medium colors on dark backgrounds", () => {
+      // Medium gray on black
+      const result = a11yColor("#808080", "#000000");
+      expect(result).toMatchInlineSnapshot(`"rgb(128,128,128)"`);
+    });
+  });
+
+  describe("respects minimum contrast ratio", () => {
+    it("uses default 3.0 contrast ratio", () => {
+      const result = a11yColor("#cccccc", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(148,148,148)"`);
+    });
+
+    it("adjusts for higher contrast ratio (4.5 WCAG AA)", () => {
+      const result = a11yColor("#cccccc", "#ffffff", 4.5);
+      expect(result).toMatchInlineSnapshot(`"rgb(118,118,118)"`);
+    });
+
+    it("adjusts for highest contrast ratio (7.0 WCAG AAA)", () => {
+      const result = a11yColor("#cccccc", "#ffffff", 7.0);
+      expect(result).toMatchInlineSnapshot(`"rgb(89,89,89)"`);
+    });
+  });
+
+  describe("handles various color formats", () => {
+    it("handles 3-digit hex colors", () => {
+      const result = a11yColor("#f00", "#fff");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+
+    it("handles 6-digit hex colors", () => {
+      const result = a11yColor("#ff0000", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+
+    it("handles rgb() colors", () => {
+      const result = a11yColor("rgb(255, 0, 0)", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+
+    it("handles named colors", () => {
+      const result = a11yColor("red", "white");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+
+    it("handles hsl() colors", () => {
+      const result = a11yColor("hsl(0, 100%, 50%)", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+    });
+  });
+
+  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");
+      expect(result).toMatchInlineSnapshot(`"rgb(96,164,85)"`);
+    });
+
+    it("brand blue on white background", () => {
+      const result = a11yColor("#4978D4", "#ffffff");
+      expect(result).toMatchInlineSnapshot(`"rgb(73,120,212)"`);
+    });
+
+    it("light text on dark theme background", () => {
+      const result = a11yColor("#aaaaaa", "#1a1a1a");
+      expect(result).toMatchInlineSnapshot(`"rgb(170,170,170)"`);
+    });
+
+    it("card type colors on white", () => {
+      const cardColors = [
+        "#F0D0DD",
+        "#F5D3CA",
+        "#FAE0B7",
+        "#FCEAA2",
+        "#E3ECAB",
+        "#CFEFC8",
+        "#C1F3DF",
+        "#C1EDF5",
+        "#C1E0F5",
+        "#C7D6F9",
+        "#D8D3F5",
+        "#E8D1EF",
+        "#E6DFDA",
+        "#D2D2D2",
+        "#FFFF8D",
+      ];
+
+      expect(cardColors.map((color) => a11yColor(color, "#ffffff"))).toEqual([
+        "rgb(212,120,158)",
+        "rgb(224,119,91)",
+        "rgb(207,132,14)",
+        "rgb(180,145,6)",
+        "rgb(140,157,36)",
+        "rgb(71,169,49)",
+        "rgb(33,169,115)",
+        "rgb(30,162,186)",
+        "rgb(57,156,223)",
+        "rgb(107,146,239)",
+        "rgb(150,137,228)",
+        "rgb(189,124,209)",
+        "rgb(169,144,127)",
+        "rgb(148,148,148)",
+        "rgb(154,154,0)",
+      ]);
+    });
+  });
+});

package/src/a11y-color.ts

@@ -1,5 +1,5 @@
 // https://github.com/alex-page/a11ycolor
-import chroma from "chroma-js";
+import {fromHSL, getContrastRatio, getHsl, isValidColor, toCss} from "./color-utils";
 
 class LRUCache<TKey, TValue> {
   #capacity: number;
@@ -41,12 +41,7 @@ const checkColor = (colorValue: string) => {
   if (colorValue === "transparent") {
     return false;
   }
-
-  try {
-    return chroma.valid(colorValue);
-  } catch (error) {
-    return false;
-  }
+  return isValidColor(colorValue);
 };
 
 /**
@@ -58,10 +53,10 @@ const checkColor = (colorValue: string) => {
  *
  * @return {string}            - The closest hex color for `toMakeA11y` on `background`
  */
-export function a11yColor(toMakeA11y: string, background: string, minimumContrast = 3.0) {
+export function a11yColor(toMakeA11y: string, background: string, minimumContrast = 3.0): string {
   const key = toMakeA11y + background + minimumContrast;
   if (cache.has(key)) {
-    return cache.get(key);
+    return cache.get(key)!;
   }
   if (!checkColor(toMakeA11y) || !checkColor(background)) {
     cache.put(key, toMakeA11y);
@@ -71,23 +66,21 @@ export function a11yColor(toMakeA11y: string, background: string, minimumContras
   if (minimumContrast < 0 && minimumContrast > 21) {
     throw new Error(`Minimum contrast must be a number between 0 and 21. It was ${minimumContrast}`);
   }
-  const a11y = chroma(toMakeA11y);
-  const bg = chroma(background);
 
   // Check the ratio straight away, if it passes return the value as hex
-  if (chroma.contrast(background, toMakeA11y) >= minimumContrast) {
-    const val = a11y.hex();
+  if (getContrastRatio(background, toMakeA11y) >= minimumContrast) {
+    const val = toCss(toMakeA11y);
     cache.put(key, val);
     return val;
   }
 
   // Ratio didn't pass so we need to find the nearest color
-  const a11yHSL = a11y.hsl();
+  const a11yHSL = getHsl(toMakeA11y);
   const a11yLightness = a11yHSL[2] * 100;
   const minHexDiff = 100 / 255; // 255 Colors / 100% HSL
 
-  const isBlackBgContrast = chroma.contrast(background, "#000") >= minimumContrast;
-  const isWhiteBgContrast = chroma.contrast(background, "#FFF") >= minimumContrast;
+  const isBlackBgContrast = getContrastRatio(background, "#000") >= minimumContrast;
+  const isWhiteBgContrast = getContrastRatio(background, "#FFF") >= minimumContrast;
   let minLightness = 0;
   let maxLightness = 100;
   let isDarkColor = false;
@@ -117,19 +110,19 @@ export function a11yColor(toMakeA11y: string, background: string, minimumContras
   // Binary search until we find the colour that meets contrast
   while (!foundColor) {
     const midLightness = (minLightness + maxLightness) / 2;
-    const midA11y = chroma.hsl(a11yHSL[0], a11yHSL[1], midLightness / 100);
+    const midA11yHex = fromHSL(a11yHSL[0], a11yHSL[1], midLightness / 100);
 
     // Give up if we are stuck
     if (Math.abs(maxLightness - minLightness) < 0.01) {
-      foundColor = midA11y.hex();
+      foundColor = midA11yHex;
       break;
     }
 
     // The colour meets contrast
-    if (chroma.contrast(midA11y.hex(), bg) >= minimumContrast) {
+    if (getContrastRatio(midA11yHex, background) >= minimumContrast) {
       // It is the minimal lightness range for one hexadecimal
       if (maxLightness - minLightness <= minHexDiff) {
-        foundColor = midA11y.hex();
+        foundColor = midA11yHex;
       } else if (isDarkColor) {
         // If it is going to be a dark color move the min to mid
         minLightness = midLightness;

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

@@ -2,7 +2,7 @@ import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {css, cx} from "@linaria/core";
 import {FunctionComponent, memo, ReactNode, useId} from "react";
-import {border, colors, layout, layoutVars, lineHeight, space, textStyles, themeVars} from "../design-system";
+import {border, layout, layoutVars, lineHeight, space, textStyles, themeVars} from "../design-system";
 import CheckedIcon from "../icons/react/Checked";
 import {IconBaseProps} from "../icons/types";
 import {Spinner} from "../loaders";
@@ -41,7 +41,7 @@ const rowCss = css`
   }
 `;
 
-const dangerousItemCss = css`
+export const dangerousItemCss = css`
   &.${rowCss} {
     &[data-highlighted] {
       color: ${themeVars.danger};
@@ -52,21 +52,21 @@ const dangerousItemCss = css`
   }
 `;
 
-const dangerousConfirmationCss = css`
+export const dangerousConfirmationCss = css`
   &.${rowCss} {
     background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
-    color: ${colors.inversedTextColor};
+    color: ${themeVars.inversedTextColor};
     border-radius: ${border.radius6}px;
 
-    --actions-menu-item-icon-color: ${colors.inversedTextColor};
+    --actions-menu-item-icon-color: ${themeVars.inversedTextColor};
 
     &:hover,
     &[data-highlighted] {
       background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
-      color: ${colors.inversedTextColor};
+      color: ${themeVars.inversedTextColor};
       border-radius: ${border.radius6}px;
 
-      --actions-menu-item-icon-color: ${colors.inversedTextColor};
+      --actions-menu-item-icon-color: ${themeVars.inversedTextColor};
     }
   }
 `;

package/src/antd/ant-modal.tsx

@@ -1,9 +1,10 @@
 import Modal from "antd/lib/modal";
 import {ModalProps} from "antd/lib/modal/Modal";
 import "antd/lib/modal/style/css";
-import {border, createInlineTheme, space, themeVars} from "../design-system";
-import {useTheme} from "../theme-provider";
+import {border, space, themeVars} from "../design-system";
+import {ThemeProvider} from "../theme-provider";
 import {css, cx} from "@linaria/core";
+import {ReactNode} from "react";
 
 const modalCss = css`
   & .ant-modal-content {
@@ -19,8 +20,12 @@ const modalCss = css`
   }
 `;
 
+function renderWithTheme(node: ReactNode): ReactNode {
+  return <ThemeProvider portal>{node}</ThemeProvider>;
+}
+
 export function AntModal({bodyStyle = {}, className, ...restProps}: ModalProps) {
-  const theme = useTheme();
-  const inlineTheme = createInlineTheme(theme);
-  return <Modal bodyStyle={{...bodyStyle, ...inlineTheme}} className={cx(className, modalCss)} {...restProps} />;
+  return (
+    <Modal bodyStyle={bodyStyle} className={cx(className, modalCss)} modalRender={renderWithTheme} {...restProps} />
+  );
 }

package/src/antd/styles.ts

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {border, colors, layout, shadows, space, textStyles, themeVars, transition} from "../design-system";
+import {border, layout, shadows, space, textStyles, themeVars, transition} from "../design-system";
 
 const inputVariables = {
   default: {
@@ -30,7 +30,7 @@ export const inputOverrides = {
     paddingLeft: space.s12,
     paddingRight: space.s12,
     border: 0,
-    borderColor: colors.transparent,
+    borderColor: themeVars.transparent,
     transition: `box-shadow ${transition}`,
     boxShadow: `var(--input-border, ${themeVars.inputBorderColor})`,
     letterSpacing: 0,
@@ -49,7 +49,7 @@ export const inputOverrides = {
   disabled: {
     color: `${themeVars.textColor}`,
     backgroundColor: `${themeVars.inputDisabledBgColor} !important`,
-    borderColor: colors.transparent,
+    borderColor: themeVars.transparent,
     boxShadow: `${themeVars.inputDisabledBorderColor} !important`,
     transition: `box-shadow ${transition}`,
     WebkitTextFillColor: "currentColor",
@@ -69,7 +69,7 @@ export const inputStyles = css`
   ${{
     ...textStyles.regular,
     "& .ant-input-group-addon": {
-      backgroundColor: colors.transparent,
+      backgroundColor: themeVars.transparent,
       border: "none",
       padding: 0,
       textAlign: "left",
@@ -93,7 +93,7 @@ export const inputStyles = css`
       padding: 0,
       border: "none",
       boxShadow: "none",
-      backgroundColor: colors.transparent,
+      backgroundColor: themeVars.transparent,
     },
     "& .ant-input-affix-wrapper.ant-input-affix-wrapper-readonly": {
       border: "none !important",
@@ -118,7 +118,7 @@ export const inputStyles = css`
       paddingBottom: space.s8,
     },
     "& .ant-select-disabled .ant-select-selection": {
-      backgroundColor: colors.transparent,
+      backgroundColor: themeVars.transparent,
     },
     "&& input:hover:not(:focus):not(:disabled), && textarea:hover:not(:focus):not(:disabled), && .ant-input:hover:not(:focus):not(:disabled)":
       inputOverrides.hover,

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

@@ -3,7 +3,7 @@ import _ from "lodash";
 import {FC, Suspense, lazy} from "react";
 import {a11yColor} from "./a11y-color";
 import {AppIconWrapper} from "./app-icon-wrapper";
-import {getAppIconBackgroundColor, getOpacities, getThemeValue, iconSize, layout} from "./design-system";
+import {getOpacities, getThemeValue, iconSize, layout} from "./design-system";
 import {Icon} from "./icons/Icon";
 import {useTheme} from "./theme-provider";
 import {useIsPhone} from "./use-is-phone";
@@ -134,7 +134,7 @@ export const AppIcon: FC<AppIconProps> = ({icon, color, isSelected, ...rest}) =>
     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.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, getThemeValue} from "./design-system";
 import {useTheme} from "./theme-provider";
 
 interface AppIconProps {
@@ -22,7 +22,7 @@ export const AppIcon: FC<AppIconProps> = ({color, icon, containerSize = 54, icon
     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, {
     dark: "linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0))",

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, getThemeValue, 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": getThemeValue(theme.mode, {
           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.inversedTextColor};
   width: ${layout.checkboxSize}px;
   height: ${layout.checkboxSize}px;
 

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,