@fibery/ui-kit 2.0.1 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fibery/ui-kit
 
+## 2.1.1
+
+### Patch Changes
+
+- Updated dependencies [d04a531]
+  - @fibery/helpers@2.0.1
+  - @fibery/react@1.5.2
+
+## 2.1.0
+
+### Minor Changes
+
+- 7cb3105: Text and background color for highlight
+
 ## 2.0.1
 
 ### Patch Changes

package/{eslint.config.mjs → esfint.config.mjs}

@@ -1,4 +1,4 @@
-import baseConfig from "../../eslint.config.mjs";
+import baseConfig from "../../esfint.config.mjs";
 
 export default [
   ...baseConfig,

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
-    "@linaria/core": "6.2.0",
-    "@linaria/react": "6.2.1",
+    "@linaria/core": "7.0.0",
+    "@linaria/react": "7.0.1",
     "@popperjs/core": "2.11.6",
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-context-menu": "2.2.1",
@@ -21,15 +21,17 @@
     "@types/react-select-country-list": "^2.2.3",
     "@types/setimmediate": "^1.0.4",
     "antd": "4.24.7",
+    "apcach": "github:antiflasher/apcach#54077b3",
     "chrono-node": "^2.9.0",
     "classnames": "2.3.1",
     "cmdk": "1.0.0",
     "color-hash": "1.0.3",
-    "colorjs.io": "0.6.1",
+    "culori": "4.0.2",
     "d3-shape": "1.3.7",
     "date-fns": "2.29.2",
     "invariant": "2.2.4",
     "lodash": "4.17.21",
+    "lru-cache": "11.2.2",
     "md5": "2.2.1",
     "moment": "2.29.4",
     "photoswipe": "5.4.4",
@@ -46,9 +48,10 @@
     "react-virtuoso": "4.18.1",
     "screenfull": "6.0.2",
     "tabbable": "5.2.1",
+    "virtua": "0.48.8",
     "@fibery/emoji-data": "2.7.3",
-    "@fibery/helpers": "2.0.0",
-    "@fibery/react": "1.5.1"
+    "@fibery/helpers": "2.0.1",
+    "@fibery/react": "1.5.2"
   },
   "devDependencies": {
     "@babel/core": "7.28.5",
@@ -58,15 +61,17 @@
     "@testing-library/react": "16.3.1",
     "@testing-library/user-event": "14.6.1",
     "@types/color-hash": "1.0.2",
+    "@types/culori": "4.0.1",
     "@types/history": "4.7.11",
     "@types/invariant": "2.2.34",
     "@types/jest": "30.0.0",
     "@types/lodash": "4.14.172",
     "@types/prop-types": "15.7.5",
     "@types/react": "18.3.12",
+    "@types/react-color": "2.13.5",
     "@types/react-dom": "18.3.1",
-    "@typescript/native-preview": "7.0.0-dev.20260225.1",
-    "@wyw-in-js/babel-preset": "0.5.5",
+    "@typescript/native-preview": "7.0.0-dev.20260401.1",
+    "@wyw-in-js/babel-preset": "1.0.6",
     "csstype": "3.0.8",
     "fs-extra": "10.0.0",
     "glob": "7.1.7",
@@ -76,7 +81,7 @@
     "react-dom": "18.3.1",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
-    "typescript": "6.0.0-beta",
+    "typescript": "6.0.1-rc",
     "unist-util-reduce": "0.2.2",
     "@fibery/babel-preset": "7.4.2"
   },
@@ -88,6 +93,7 @@
     "test": "TZ=Europe/Minsk jest",
     "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",
+    "check": "../../scripts/check.sh",
     "lint": "../../scripts/lint.sh",
     "generate-icons": "node scripts/generate-icons.mjs",
     "typecheck": "../../scripts/typecheck.sh"

package/scripts/generate-icons.mjs

@@ -1,13 +1,13 @@
-import path from "path";
 import fs from "fs-extra";
 import {readFile} from "fs/promises";
-import svgo from "svgo";
-import {parse} from "svg-parser";
 import glob from "glob";
-import {promisify} from "util";
 import _ from "lodash";
+import path from "path";
+import {parse} from "svg-parser";
+import svgo from "svgo";
 import {recursiveReduce} from "unist-util-reduce";
 import {fileURLToPath} from "url";
+import {promisify} from "util";
 
 const svgoConfig = (prefix) => ({
   plugins: [
@@ -23,26 +23,23 @@ const svgoConfig = (prefix) => ({
   ],
 });
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-const template = `
-// This icon file is generated automatically.
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
-import { IconDefinition } from '../types';
-
-const <%= identifier %>: IconDefinition = <%= content %>;
-
-export default <%= identifier %>;
+const preludeTemplate = `/**
+ * This file was automatically generated. Do not edit manually.
+ * <% if (source) { %>
+ * @see import("<%= source %>")<% } %>
+ * @see import("<%= generator %>")
+ */
 `;
 
 const render = _.template(
-  `
-// This icon file is generated automatically.
-
-import {forwardRef} from 'react';
-import <%= svgIdentifier %>Svg from '../ast/<%= svgIdentifier %>';
-import { Icon } from '../Icon';
-import { IconBaseProps } from '../types';
+  `${preludeTemplate}
+import {forwardRef} from "react";
+import <%= svgIdentifier %>Svg from "../ast/<%= svgIdentifier %>";
+import {Icon} from "../Icon";
+import type {IconBaseProps} from "../types";
 
 const <%= svgIdentifier %> = forwardRef<SVGSVGElement, IconBaseProps>(function <%= svgIdentifier %>(
   props: IconBaseProps,
@@ -53,29 +50,38 @@ export default <%= svgIdentifier %>;
 `.trim()
 );
 
-const defTemplate = _.template(template);
+const defTemplate = _.template(`${preludeTemplate}
+import type {IconDefinition} from "../types";
+
+const <%= identifier %>: IconDefinition = <%= content %>;
+
+export default <%= identifier %>;
+`);
 
 const iconsDir = path.join(__dirname, "../src/icons");
 const iconsSvgPathDir = path.join(iconsDir, "./svg");
 const iconsReactPathDir = path.join(iconsDir, "./react");
 const iconsAstPathDir = path.join(iconsDir, "./ast");
-const iconPaths = await promisify(glob)("**/*.svg", {cwd: iconsSvgPathDir});
+const pattern = "**/*.svg";
+const icons = await promisify(glob)(pattern, {cwd: iconsSvgPathDir});
 
 await fs.remove(iconsReactPathDir);
 await fs.remove(iconsAstPathDir);
-let entryText =
-  `
-  // This icon file is generated automatically.
-  `.trim() + "\n";
-for (const iconPath of iconPaths) {
-  const name = _.upperFirst(_.camelCase(iconPath.replace("/", "-").replace(".svg", "")));
-  const ast = parse(
-    svgo.optimize((await readFile(path.join(iconsSvgPathDir, iconPath))).toString(), svgoConfig(name)).data
-  );
+
+const generator = path.relative(iconsReactPathDir, __filename);
+let barrelExportContent = _.template(preludeTemplate)({source: null, generator: generator}) + "\n";
+for (const icon of icons) {
+  const name = _.upperFirst(_.camelCase(icon.replace("/", "-").replace(".svg", "")));
+  const iconPath = path.join(iconsSvgPathDir, icon);
+  const source = path.relative(iconsReactPathDir, iconPath);
+
+  const ast = parse(svgo.optimize((await readFile(iconPath)).toString(), svgoConfig(name)).data);
 
   await fs.outputFile(
     path.join(iconsAstPathDir, `./${name}.ts`),
     defTemplate({
+      source,
+      generator,
       identifier: name,
       content: JSON.stringify({
         icon: recursiveReduce(ast, (node) => {
@@ -107,14 +113,16 @@ for (const iconPath of iconPaths) {
   await fs.outputFile(
     path.join(iconsReactPathDir, `${name}.tsx`),
     render({
+      source,
+      generator,
       svgIdentifier: name,
     })
   );
 
-  entryText += `export { default as ${name} } from './${name}';\n`;
+  barrelExportContent += `export {default as ${name}} from "./${name}";\n`;
 }
-await fs.outputFile(path.join(iconsReactPathDir, `./index.tsx`), entryText);
-await fs.outputFile(path.join(iconsAstPathDir, `./index.tsx`), entryText);
+await fs.outputFile(path.join(iconsReactPathDir, `./index.tsx`), barrelExportContent);
+await fs.outputFile(path.join(iconsAstPathDir, `./index.tsx`), barrelExportContent);
 
 // import {getSvg, iconNames} from "../Icon";
 //

package/src/@types/react-color.d.ts

@@ -0,0 +1,36 @@
+declare module "react-color/lib/components/common" {
+  import type {ComponentType} from "react";
+
+  // ColorWrap HOC: injects hex/hsl/hsv/rgb/onChange into the inner component,
+  // and exposes color/onChangeComplete/onChange on the outer component.
+  // Internally, onChange/onChangeComplete receive a full ColorResult object
+  // (ColorWrap.handleChange calls toState() before forwarding).
+  type ColorResult = {
+    hex: string;
+    hsl: {h: number; s: number; l: number; a: number};
+    hsv: {h: number; s: number; v: number; a: number};
+    rgb: {r: number; g: number; b: number; a: number};
+    oldHue: number;
+    source: string;
+  };
+
+  type ColorWrapExternalProps = {
+    color?: string;
+    onChangeComplete?: (color: ColorResult) => void;
+    onChange?: (color: ColorResult) => void;
+  };
+
+  // ColorWrap overrides inner onChange with its own handler that passes ColorResult.
+  // Omit onChange from inner props to avoid union conflict.
+  export function ColorWrap<P extends Record<string, unknown>>(
+    component: ComponentType<P>
+  ): ComponentType<Omit<Partial<P>, "onChange"> & ColorWrapExternalProps>;
+
+  export const EditableInput: ComponentType<{
+    style?: Record<string, Record<string, unknown>>;
+    value?: string;
+    onChange?: (color: string) => void;
+  }>;
+  export const Hue: ComponentType<Record<string, unknown>>;
+  export const Saturation: ComponentType<Record<string, unknown>>;
+}

package/src/a11y-color.test.ts

@@ -5,13 +5,13 @@ describe("a11yColor", () => {
     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)"`);
+      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).toMatchInlineSnapshot(`"rgb(255,255,255)"`);
+      expect(result).toMatchInlineSnapshot(`"rgb(255, 255, 255)"`);
     });
 
     it("invalid toMakeA11y color is provided", () => {
@@ -39,124 +39,131 @@ describe("a11yColor", () => {
     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)"`);
+      expect(result).toMatchInlineSnapshot(`"rgb(154, 154, 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)"`);
+      expect(result).toMatchInlineSnapshot(`"rgb(48, 48, 255)"`);
     });
 
     it("handles medium colors on light backgrounds", () => {
       // Medium gray on white
       const result = a11yColor("#808080", "#ffffff");
-      expect(result).toMatchInlineSnapshot(`"rgb(128,128,128)"`);
+      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)"`);
+      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)"`);
+      expect(result).toMatchInlineSnapshot(`"rgb(149, 149, 149)"`);
     });
 
     it("adjusts for higher contrast ratio (4.5 WCAG AA)", () => {
       const result = a11yColor("#cccccc", "#ffffff", 4.5);
-      expect(result).toMatchInlineSnapshot(`"rgb(118,118,118)"`);
+      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)"`);
+      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)"`);
+      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)"`);
+      expect(result).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`);
+    });
+
+    it("handles 8-digit hex colors with alpha", () => {
+      const result = a11yColor("#ff0000aa", "#aaa");
+      const result2 = a11yColor("#ff0000", "#aaa");
+      expect(result).toMatchInlineSnapshot(`"rgb(176, 25, 25)"`);
+      expect(result2).toMatchInlineSnapshot(`"rgb(182, 0, 0)"`);
     });
 
     it("handles rgb() colors", () => {
       const result = a11yColor("rgb(255, 0, 0)", "#ffffff");
-      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+      expect(result).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`);
     });
 
     it("handles named colors", () => {
       const result = a11yColor("red", "white");
-      expect(result).toMatchInlineSnapshot(`"rgb(255,0,0)"`);
+      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)"`);
+      expect(result).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`);
+    });
+  });
+
+  describe("alpha foreground colors", () => {
+    it("alpha fg already passing contrast", () => {
+      // black at 80% on white → dark gray, passes 3.0
+      expect(a11yColor("rgba(0,0,0,0.8)", "#ffffff")).toMatchInlineSnapshot(`"rgb(51, 51, 51)"`);
+    });
+
+    it("alpha fg needing adjustment on white", () => {
+      // light gray at 30% on white → very light, fails contrast
+      expect(a11yColor("rgba(200,200,200,0.3)", "#ffffff")).toMatchInlineSnapshot(`"rgb(149, 149, 149)"`);
+    });
+
+    it("very low alpha (nearly transparent) on white", () => {
+      // red at 10% on white → nearly white, needs heavy adjustment
+      expect(a11yColor("rgba(255,0,0,0.1)", "#ffffff")).toMatchInlineSnapshot(`"rgb(255, 93, 93)"`);
+    });
+
+    it("alpha fg on dark bg", () => {
+      expect(a11yColor("rgba(255,255,255,0.3)", "#1a1a1a")).toMatchInlineSnapshot(`"rgb(101, 101, 101)"`);
+    });
+
+    it("alpha bg flattened over white", () => {
+      expect(a11yColor("#ff0000", "rgba(255,255,255,0.5)")).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`);
+    });
+
+    it("both fg and bg with alpha", () => {
+      expect(a11yColor("rgba(100,100,100,0.5)", "rgba(200,200,200,0.8)")).toMatchInlineSnapshot(`"rgb(119, 119, 119)"`);
+    });
+
+    it("real-world: alpha(color, 0.15) on white", () => {
+      // common pattern in the codebase
+      expect(a11yColor("rgba(73,120,212,0.15)", "#ffffff")).toMatchInlineSnapshot(`"rgb(111, 148, 221)"`);
+    });
+
+    it("real-world: alpha(color, 0.95) on dark bg", () => {
+      expect(a11yColor("rgba(73,120,212,0.95)", "#1a1a1a")).toMatchInlineSnapshot(`"rgb(71, 115, 203)"`);
     });
   });
 
   describe("real-world use cases", () => {
     it("brand green on white background", () => {
       const result = a11yColor("#69AC5E", "#ffffff");
-      expect(result).toMatchInlineSnapshot(`"rgb(96,164,85)"`);
+      expect(result).toMatchInlineSnapshot(`"rgb(96, 165, 85)"`);
     });
 
     it("brand blue on white background", () => {
       const result = a11yColor("#4978D4", "#ffffff");
-      expect(result).toMatchInlineSnapshot(`"rgb(73,120,212)"`);
+      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)",
-      ]);
+      expect(result).toMatchInlineSnapshot(`"rgb(170, 170, 170)"`);
     });
   });
 });

package/src/a11y-color.ts

@@ -1,5 +1,6 @@
 // https://github.com/alex-page/a11ycolor
-import {fromHSL, getContrastRatio, getHsl, isValidColor, toCss} from "./color-utils";
+import {Hsl, Rgb, wcagContrast} from "culori";
+import {colorFromUnsafe, cssFromColor, flattenAlpha, hslFrom, isValidColor, rgbFrom} from "./color-utils";
 
 class LRUCache<TKey, TValue> {
   #capacity: number;
@@ -37,6 +38,11 @@ class LRUCache<TKey, TValue> {
 
 const cache = new LRUCache<string, string>(5000);
 
+const white: Rgb = {mode: "rgb", r: 1, g: 1, b: 1};
+const black: Rgb = {mode: "rgb", r: 0, g: 0, b: 0};
+
+const hasAlpha = (color: {alpha?: number}) => color.alpha !== undefined && color.alpha < 1;
+
 const checkColor = (colorValue: string) => {
   if (colorValue === "transparent") {
     return false;
@@ -44,43 +50,42 @@ const checkColor = (colorValue: string) => {
   return isValidColor(colorValue);
 };
 
-/**
- * Find the nearest accessible color
- *
- * @param  {string} toMakeA11y - The color that is to be changed
- * @param  {string} background - The background color to for the contrast
- * * @param  {string} minimumContrast - The WCAG 2.1 contrast ratio
- *
- * @return {string}            - The closest hex color for `toMakeA11y` on `background`
- */
-export function a11yColor(toMakeA11y: string, background: string, minimumContrast = 3.0): string {
-  const key = toMakeA11y + background + minimumContrast;
+export function a11yColor(fg: string, bg: string, minimumContrast = 3.0): string {
+  const key = fg + bg + minimumContrast;
   if (cache.has(key)) {
     return cache.get(key)!;
   }
-  if (!checkColor(toMakeA11y) || !checkColor(background)) {
-    cache.put(key, toMakeA11y);
-    return toMakeA11y;
+  if (!checkColor(fg) || !checkColor(bg)) {
+    cache.put(key, fg);
+    return fg;
   }
 
-  if (minimumContrast < 0 && minimumContrast > 21) {
+  if (minimumContrast < 0 || minimumContrast > 21) {
     throw new Error(`Minimum contrast must be a number between 0 and 21. It was ${minimumContrast}`);
   }
 
-  // Check the ratio straight away, if it passes return the value as hex
-  if (getContrastRatio(background, toMakeA11y) >= minimumContrast) {
-    const val = toCss(toMakeA11y);
-    cache.put(key, val);
-    return val;
+  const fgColor = colorFromUnsafe(fg);
+  const bgColor = colorFromUnsafe(bg);
+
+  // Flatten alpha to get the effective opaque colors the user sees on screen
+  const effectiveBg = hasAlpha(bgColor) ? flattenAlpha(bgColor, white) : bgColor;
+  const effectiveFg = hasAlpha(fgColor) ? flattenAlpha(fgColor, effectiveBg) : fgColor;
+
+  // Check the ratio straight away, if it passes return the value as-is
+  if (wcagContrast(effectiveBg, effectiveFg) >= minimumContrast) {
+    const effectiveFgCss = cssFromColor(rgbFrom(effectiveFg));
+    cache.put(key, effectiveFgCss);
+    return effectiveFgCss;
   }
 
-  // Ratio didn't pass so we need to find the nearest color
-  const a11yHSL = getHsl(toMakeA11y);
-  const a11yLightness = a11yHSL[2] * 100;
+  // Ratio didn't pass — binary search on HSL lightness of the effective fg
+  const {h = 0, s = 0, l = 0} = hslFrom(effectiveFg);
+
+  const a11yLightness = l * 100;
   const minHexDiff = 100 / 255; // 255 Colors / 100% HSL
 
-  const isBlackBgContrast = getContrastRatio(background, "#000") >= minimumContrast;
-  const isWhiteBgContrast = getContrastRatio(background, "#FFF") >= minimumContrast;
+  const isBlackBgContrast = wcagContrast(effectiveBg, black) >= minimumContrast;
+  const isWhiteBgContrast = wcagContrast(effectiveBg, white) >= minimumContrast;
   let minLightness = 0;
   let maxLightness = 100;
   let isDarkColor = false;
@@ -104,25 +109,22 @@ export function a11yColor(toMakeA11y: string, background: string, minimumContras
     minLightness = a11yLightness;
   }
 
-  // The colour to return
-  let foundColor;
+  let res: Hsl | undefined;
 
   // Binary search until we find the colour that meets contrast
-  while (!foundColor) {
+  while (!res) {
     const midLightness = (minLightness + maxLightness) / 2;
-    const midA11yHex = fromHSL(a11yHSL[0], a11yHSL[1], midLightness / 100);
+    const midColor: Hsl = {mode: "hsl", h, s, l: midLightness / 100};
 
     // Give up if we are stuck
     if (Math.abs(maxLightness - minLightness) < 0.01) {
-      foundColor = midA11yHex;
+      res = midColor;
       break;
     }
 
-    // The colour meets contrast
-    if (getContrastRatio(midA11yHex, background) >= minimumContrast) {
-      // It is the minimal lightness range for one hexadecimal
+    if (wcagContrast(midColor, effectiveBg) >= minimumContrast) {
       if (maxLightness - minLightness <= minHexDiff) {
-        foundColor = midA11yHex;
+        res = midColor;
       } else if (isDarkColor) {
         // If it is going to be a dark color move the min to mid
         minLightness = midLightness;
@@ -138,6 +140,7 @@ export function a11yColor(toMakeA11y: string, background: string, minimumContras
       minLightness = midLightness;
     }
   }
-  cache.put(key, foundColor);
-  return foundColor;
+  const foundColorCss = cssFromColor(res);
+  cache.put(key, foundColorCss);
+  return foundColorCss;
 }

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

@@ -99,7 +99,7 @@ const RightCorner = ({shortcut, loading, checked}: {shortcut?: string[]; loading
 
   return loading || shortcuts || checked ? (
     <div className={cornerCss}>
-      {loading ? <Spinner color={theme.primary} iconSize={16} containerSize={16} /> : null}
+      {loading ? <Spinner color={theme.colors.colorAccent} iconSize={16} containerSize={16} /> : null}
       {shortcuts ? (
         <KbdGroup>
           {shortcuts.map((item) => (

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

@@ -10,7 +10,7 @@ import {preventDefault} from "@fibery/react/src/prevent-default";
 import {useState} from "react";
 import {useFeatures} from "../features";
 import {ActionsMenuConfirmation, ActionsMenuConfirmationProps} from "./actions-menu-confirmation";
-import {useActionsMenuOpenStateTracker} from "./actions-menu-open-state-tracker";
+import {useOpenPopoverTracker} from "../open-popover-tracker";
 
 export const preventDefaultAndStopPropagation = (event: React.MouseEvent) => {
   event.preventDefault();
@@ -46,14 +46,14 @@ export const ActionsMenu = ({
   height,
 }: ActionsMenuProps): JSX.Element => {
   const features = useFeatures<{enableMobileMenus: boolean}>();
-  const {onMenuOpenChange} = useActionsMenuOpenStateTracker();
+  const {onOpenChange: onPopoverOpenChange} = useOpenPopoverTracker();
   const [isOpen = false, setOpen] = useControllableState({
     value: open,
     onChange: (value) => {
       if (onOpenChange) {
         onOpenChange(value);
       }
-      onMenuOpenChange(value);
+      onPopoverOpenChange(value);
     },
   });
   const isPhone = useIsPhone();

package/src/ai/model.tsx

@@ -15,7 +15,7 @@ const exampleItemCodeStyle = css`
     backgroundColor: themeVars.transparent,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: themeVars.opacity.opacity10,
+      backgroundColor: themeVars.colorAccentBgSubtle,
     },
   }}
 `;

package/src/ai/temperature.tsx

@@ -15,7 +15,7 @@ const exampleItemCodeStyle = css`
     backgroundColor: themeVars.transparent,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: themeVars.opacity.opacity10,
+      backgroundColor: themeVars.colorAccentBgSubtle,
     },
   }}
 `;