@fibery/ui-kit 1.11.2 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.11.2",
+  "version": "1.12.2",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -23,7 +23,8 @@
     "src/tooltip.tsx",
     "src/BackButton.tsx",
     "src/Button",
-    "src/emoji-mart/**/*.ts*"
+    "src/emoji-mart/**/*.ts*",
+    "src/a11y-color.ts"
   ],
   "license": "UNLICENSED",
   "dependencies": {
@@ -59,9 +60,9 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/emoji-data": "1.1.1",
-    "@fibery/react": "1.0.2",
-    "@fibery/helpers": "1.0.4"
+    "@fibery/helpers": "1.0.4",
+    "@fibery/emoji-data": "1.1.2",
+    "@fibery/react": "1.0.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/Button/button-base.tsx

@@ -108,7 +108,7 @@ type StyledProps = {
 const StyledButtonBase = styled.button<StyledProps>`
   display: block;
   box-sizing: border-box;
-  font-weight: ${fontWeight.bold};
+  font-weight: ${fontWeight.medium};
   margin: 0;
   border-radius: ${border.radius6}px;
   border: 0;

package/src/a11y-color.ts

@@ -0,0 +1,147 @@
+// https://github.com/alex-page/a11ycolor
+import chroma from "chroma-js";
+
+class LRUCache<TKey, TValue> {
+  #capacity: number;
+  #cache: Map<TKey, TValue>;
+  constructor(capacity: number) {
+    this.#cache = new Map();
+    this.#capacity = capacity;
+  }
+  has(key: TKey) {
+    return this.#cache.has(key);
+  }
+  get(key: TKey) {
+    if (!this.has(key)) {
+      throw new Error('Please check if the key exists using the "has" method');
+    }
+
+    const val = this.#cache.get(key);
+    this.#cache.delete(key);
+    this.#cache.set(key, val as unknown as TValue);
+
+    return val;
+  }
+
+  put(key: TKey, value: TValue) {
+    this.#cache.delete(key);
+
+    if (this.#cache.size === this.#capacity) {
+      this.#cache.delete(this.#cache.keys().next().value);
+      this.#cache.set(key, value);
+    } else {
+      this.#cache.set(key, value);
+    }
+  }
+}
+
+const cache = new LRUCache<string, string>(5000);
+
+const checkColor = (colorValue: string) => {
+  if (colorValue === "transparent") {
+    return false;
+  }
+
+  try {
+    return chroma.valid(colorValue);
+  } catch (error) {
+    return false;
+  }
+};
+
+/**
+ * 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) {
+  if (!checkColor(toMakeA11y) || !checkColor(background)) {
+    return toMakeA11y;
+  }
+
+  if (minimumContrast < 0 && minimumContrast > 21) {
+    throw new Error(`Minimum contrast must be a number between 0 and 21. It was ${minimumContrast}`);
+  }
+  const key = toMakeA11y + background + minimumContrast;
+  if (cache.has(key)) {
+    return cache.get(key);
+  }
+  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) {
+    return a11y.hex();
+  }
+
+  // Ratio didn't pass so we need to find the nearest color
+  const a11yHSL = a11y.hsl();
+  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;
+  let minLightness = 0;
+  let maxLightness = 100;
+  let isDarkColor = false;
+
+  // If black and white both pass on the background
+  if (isBlackBgContrast && isWhiteBgContrast) {
+    // Change the min lightness if the color is light
+    if (a11yLightness >= 50) {
+      minLightness = a11yLightness;
+    } else {
+      // Change the max lightness if the color is dark
+      maxLightness = a11yLightness;
+      isDarkColor = true;
+    }
+  } else if (isBlackBgContrast) {
+    // If our colour passes contrast on black
+    maxLightness = a11yLightness;
+    isDarkColor = true;
+  } else {
+    // Colour doesn't meet contrast pass on black
+    minLightness = a11yLightness;
+  }
+
+  // The colour to return
+  let foundColor;
+
+  // 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);
+
+    // Give up if we are stuck
+    if (Math.abs(maxLightness - minLightness) < 0.01) {
+      foundColor = midA11y.hex();
+      break;
+    }
+
+    // The colour meets contrast
+    if (chroma.contrast(midA11y.hex(), bg) >= minimumContrast) {
+      // It is the minimal lightness range for one hexadecimal
+      if (maxLightness - minLightness <= minHexDiff) {
+        foundColor = midA11y.hex();
+      } else if (isDarkColor) {
+        // If it is going to be a dark color move the min to mid
+        minLightness = midLightness;
+      } else {
+        // If it is going to be a light color move the max to mid
+        maxLightness = midLightness;
+      }
+    } else if (isDarkColor) {
+      // We do not meet minimum contrast if it is a dark color move max to mid
+      maxLightness = midLightness;
+    } else {
+      // If it is a light color move min to mid
+      minLightness = midLightness;
+    }
+  }
+
+  return foundColor;
+}

package/src/designSystem.ts

@@ -23,9 +23,11 @@ import {a11yColor} from "./a11y-color";
 export const typeSizes = [28, 24, 18, 16, 14, 12, 10, 8] as const;
 
 export const fontWeight = {
+  light: 300,
   regular: 400,
-  bold: 500,
-  bolder: 600,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
 } as const;
 
 const transparent = "rgba(255, 255, 255, 0)";
@@ -839,7 +841,7 @@ export const textStyles = {
     fontSize: typeSizes[0],
     letterSpacing: "-0.003em",
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.bold,
+    fontWeight: fontWeight.medium,
     color: themeVars.textColor,
   },
   heading2: {
@@ -847,7 +849,7 @@ export const textStyles = {
     fontSize: typeSizes[1],
     letterSpacing: "-0.002em",
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.bold,
+    fontWeight: fontWeight.medium,
     color: themeVars.textColor,
   },
   heading3: {
@@ -855,21 +857,21 @@ export const textStyles = {
     fontSize: typeSizes[2],
     letterSpacing: "-0.002em",
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.bold,
+    fontWeight: fontWeight.medium,
     color: themeVars.textColor,
   },
   heading4: {
     fontFamily,
     fontSize: typeSizes[3],
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.bold,
+    fontWeight: fontWeight.medium,
     color: themeVars.textColor,
   },
   heading5: {
     fontFamily,
     fontSize: typeSizes[4],
     lineHeight: lineHeight.heading,
-    fontWeight: fontWeight.bold,
+    fontWeight: fontWeight.medium,
     color: themeVars.textColor,
   },
   heading6: {

package/src/tooltip.tsx

@@ -1,7 +1,7 @@
 import {css, cx} from "@linaria/core";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import type {ReactNode, SyntheticEvent} from "react";
-import {border, lineHeight, space, themeVars, tooltipDelay} from "./designSystem";
+import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./designSystem";
 
 const preventDefaultAndStopPropagation = (e: SyntheticEvent) => {
   e.preventDefault();
@@ -11,13 +11,13 @@ const preventDefaultAndStopPropagation = (e: SyntheticEvent) => {
 const titleStyle = css`
   color: ${themeVars.whiteColor};
   line-height: ${lineHeight.heading};
-  font-weight: 500;
+  font-weight: ${fontWeight.medium};
 `;
 
 const descriptionStyle = css`
   color: ${themeVars.shortcutTextColor};
   line-height: ${lineHeight.heading};
-  font-weight: 400;
+  font-weight: ${fontWeight.regular};
 `;
 
 const tooltipStyle = css`