@fibery/ui-kit 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @fibery/ui-kit
 
+## 2.1.0
+
+### Minor Changes
+
+- 7cb3105: Text and background color for highlight
+
+## 2.0.1
+
+### Patch Changes
+
+- Updated dependencies [7091c2b]
+  - @fibery/emoji-data@2.7.3
+
 ## 2.0.0
 
 ### Major Changes

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

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

package/jest.config.cjs

@@ -0,0 +1,36 @@
+/** @type {import('@jest/schemas').InitialOptions} */
+const config = {
+  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts"],
+  coveragePathIgnorePatterns: ["/node_modules/"],
+  coverageReporters: ["text", "cobertura"],
+  moduleNameMapper: {
+    "\\.(css)$": "<rootDir>/src/__mocks__/styleMock.js",
+  },
+  setupFilesAfterEnv: ["<rootDir>/config/jest/testFrameworkSetup.js"],
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    customExportConditions: ["@fibery/source"],
+  },
+  transform: {
+    "^.+\\.(js|jsx|ts|tsx)$": [
+      "@swc/jest",
+      {
+        jsc: {
+          parser: {
+            syntax: "typescript",
+            tsx: true,
+            decorators: true,
+            dynamicImport: true,
+          },
+          transform: {
+            react: {
+              runtime: "automatic",
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+
+module.exports = config;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "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",
@@ -25,7 +25,7 @@
     "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",
@@ -46,14 +46,10 @@
     "react-virtuoso": "4.18.1",
     "screenfull": "6.0.2",
     "tabbable": "5.2.1",
-    "@fibery/emoji-data": "2.7.2",
+    "@fibery/emoji-data": "2.7.3",
     "@fibery/helpers": "2.0.0",
     "@fibery/react": "1.5.1"
   },
-  "peerDependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
-  },
   "devDependencies": {
     "@babel/core": "7.28.5",
     "@babel/runtime": "7.28.4",
@@ -62,14 +58,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",
-    "@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",
@@ -79,57 +78,21 @@
     "react-dom": "18.3.1",
     "svg-parser": "2.0.4",
     "svgo": "2.8.0",
-    "typescript": "5.9.3",
+    "typescript": "6.0.1-rc",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.2",
-    "@fibery/eslint-config": "9.0.1"
+    "@fibery/babel-preset": "7.4.2"
   },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "coveragePathIgnorePatterns": [
-      "/node_modules/"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!src/**/*.d.ts"
-    ],
-    "coverageReporters": [
-      "text",
-      "cobertura"
-    ],
-    "moduleNameMapper": {
-      "\\.(css)$": "<rootDir>/src/__mocks__/styleMock.js"
-    },
-    "transform": {
-      "^.+\\.(js|jsx|ts|tsx)$": [
-        "@swc/jest",
-        {
-          "jsc": {
-            "parser": {
-              "syntax": "typescript",
-              "tsx": true,
-              "decorators": true,
-              "dynamicImport": true
-            },
-            "transform": {
-              "react": {
-                "runtime": "automatic"
-              }
-            }
-          }
-        }
-      ]
-    },
-    "setupFilesAfterEnv": [
-      "<rootDir>/config/jest/testFrameworkSetup.js"
-    ]
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "scripts": {
     "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",
-    "lint": "eslint .",
+    "check": "../../scripts/check.sh",
+    "lint": "../../scripts/lint.sh",
     "generate-icons": "node scripts/generate-icons.mjs",
-    "typecheck": "tsc --noEmit"
+    "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/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css" {}

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;
 }