@fibery/ui-kit 1.11.0 → 1.11.2-next

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.11.0",
+  "version": "1.11.2-next",
   "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,6 +60,7 @@
     "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
+    "@fibery/emoji-data": "1.1.1",
     "@fibery/helpers": "1.0.4",
     "@fibery/react": "1.0.2"
   },
@@ -93,8 +95,8 @@
     "svgo": "2.8.0",
     "typescript": "5.0.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/eslint-config": "8.3.0",
-    "@fibery/babel-preset": "7.2.0"
+    "@fibery/babel-preset": "7.2.0",
+    "@fibery/eslint-config": "8.3.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

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/emoji-mart/data/get-data.tsx

@@ -1,5 +1,5 @@
-import type {Data} from "emoji-mart";
 import {detectEmojiSupportLevel} from "../emoji-support";
+import type {Data} from "emoji-mart";
 
 export type EmojiDataProps = {
   native: boolean;
@@ -15,12 +15,18 @@ let promise: Promise<EmojiDataProps>;
 const backgroundImageFn = (set: string) =>
   `https://fibery-ui-public-assets.s3.eu-central-1.amazonaws.com/images/emoji-datasource-${set}-15_0_1-64.png`;
 
+export const loadEmojiData = async () => {
+  const data = await import("@fibery/emoji-data/data/all.json");
+  return data.default;
+};
+
 const getAppleDataProps = async (): Promise<EmojiDataProps> => {
-  const [level, data] = await Promise.all([detectEmojiSupportLevel(), import("./all.json")]);
+  const [level, data] = await Promise.all([detectEmojiSupportLevel(), loadEmojiData()]);
 
   return {
-    native: level >= 14, // until twemoji supports v15 our all.json represents data for v14
-    data: data.default,
+    native: level >= 14,
+    // type declarations between @fibery/emoji-data and emoji-mart conflict a bit but they are compatible
+    data: data as unknown as Data,
     backgroundImageFn,
     set: "apple",
     sheetColumns: 61,
@@ -28,11 +34,12 @@ const getAppleDataProps = async (): Promise<EmojiDataProps> => {
   };
 };
 const getTwitterDataProps = async (): Promise<EmojiDataProps> => {
-  const data = await import("./all.json");
+  const data = await loadEmojiData();
 
   return {
     native: false,
-    data: data.default,
+    // type declarations between @fibery/emoji-data and emoji-mart conflict a bit but they are compatible
+    data: data as unknown as Data,
     backgroundImageFn,
     set: "twitter",
     sheetColumns: 61,

package/src/emoji-mart/emoji-index.ts

@@ -1,5 +1,5 @@
-import {NimbleEmojiIndex} from "emoji-mart";
+import {NimbleEmojiIndex} from "@fibery/emoji-data";
 
-import data from "./data/all.json";
+import data from "@fibery/emoji-data/data/all.json";
 
 export const emojiIndex = new NimbleEmojiIndex(data);

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`

package/src/emoji-mart/data.tsx

@@ -1,4 +0,0 @@
-export const loadEmojiData = async () => {
-  const data = await import("emoji-mart/data/all.json");
-  return data;
-};