@fibery/ui-kit 1.40.4 → 1.42.0

package/src/design-system/alpha.test.ts

@@ -0,0 +1,59 @@
+import {getOpacities, transparent} from "./alpha";
+
+describe("getOpacities", () => {
+  test("color maps to alphas", () => {
+    expect(getOpacities("#f00")).toMatchInlineSnapshot(`
+      {
+        "opacity0": "rgba(255,0,0,0)",
+        "opacity10": "rgba(255,0,0,0.1)",
+        "opacity100": "rgb(255,0,0)",
+        "opacity15": "rgba(255,0,0,0.15)",
+        "opacity20": "rgba(255,0,0,0.2)",
+        "opacity25": "rgba(255,0,0,0.25)",
+        "opacity30": "rgba(255,0,0,0.3)",
+        "opacity35": "rgba(255,0,0,0.35)",
+        "opacity40": "rgba(255,0,0,0.4)",
+        "opacity45": "rgba(255,0,0,0.45)",
+        "opacity5": "rgba(255,0,0,0.05)",
+        "opacity50": "rgba(255,0,0,0.5)",
+        "opacity55": "rgba(255,0,0,0.55)",
+        "opacity60": "rgba(255,0,0,0.6)",
+        "opacity65": "rgba(255,0,0,0.65)",
+        "opacity70": "rgba(255,0,0,0.7)",
+        "opacity75": "rgba(255,0,0,0.75)",
+        "opacity80": "rgba(255,0,0,0.8)",
+        "opacity85": "rgba(255,0,0,0.85)",
+        "opacity90": "rgba(255,0,0,0.9)",
+        "opacity95": "rgba(255,0,0,0.95)",
+      }
+    `);
+  });
+
+  test("transparent is identity map", () => {
+    expect(getOpacities(transparent)).toMatchInlineSnapshot(`
+      {
+        "opacity0": "rgba(255, 255, 255, 0)",
+        "opacity10": "rgba(255, 255, 255, 0)",
+        "opacity100": "rgba(255, 255, 255, 0)",
+        "opacity15": "rgba(255, 255, 255, 0)",
+        "opacity20": "rgba(255, 255, 255, 0)",
+        "opacity25": "rgba(255, 255, 255, 0)",
+        "opacity30": "rgba(255, 255, 255, 0)",
+        "opacity35": "rgba(255, 255, 255, 0)",
+        "opacity40": "rgba(255, 255, 255, 0)",
+        "opacity45": "rgba(255, 255, 255, 0)",
+        "opacity5": "rgba(255, 255, 255, 0)",
+        "opacity50": "rgba(255, 255, 255, 0)",
+        "opacity55": "rgba(255, 255, 255, 0)",
+        "opacity60": "rgba(255, 255, 255, 0)",
+        "opacity65": "rgba(255, 255, 255, 0)",
+        "opacity70": "rgba(255, 255, 255, 0)",
+        "opacity75": "rgba(255, 255, 255, 0)",
+        "opacity80": "rgba(255, 255, 255, 0)",
+        "opacity85": "rgba(255, 255, 255, 0)",
+        "opacity90": "rgba(255, 255, 255, 0)",
+        "opacity95": "rgba(255, 255, 255, 0)",
+      }
+    `);
+  });
+});

package/src/design-system/alpha.ts

@@ -0,0 +1,41 @@
+import {produceColor, setAlpha} from "../color-utils";
+import mapValues from "lodash/mapValues";
+import memoize from "lodash/memoize";
+export const transparent = "rgba(255, 255, 255, 0)";
+
+export const opacity = {
+  opacity100: 1,
+  opacity95: 0.95,
+  opacity90: 0.9,
+  opacity85: 0.85,
+  opacity80: 0.8,
+  opacity75: 0.75,
+  opacity70: 0.7,
+  opacity65: 0.65,
+  opacity60: 0.6,
+  opacity55: 0.55,
+  opacity50: 0.5,
+  opacity45: 0.45,
+  opacity40: 0.4,
+  opacity35: 0.35,
+  opacity30: 0.3,
+  opacity25: 0.25,
+  opacity20: 0.2,
+  opacity15: 0.15,
+  opacity10: 0.1,
+  opacity5: 0.05,
+  opacity0: 0,
+} as const;
+
+/**
+ * @deprecated I would think thrice on semantic value of this wrapper before one more usage
+ * maybe you will come up with something better
+ */
+export const getOpacities = memoize((color: string) =>
+  mapValues(opacity, (opacityValue) => {
+    if (color === transparent) {
+      return transparent;
+    }
+    return produceColor(color, (c) => setAlpha(c, opacityValue));
+  })
+);

package/src/design-system/animation.ts

@@ -0,0 +1,10 @@
+export const duration = 120;
+
+export const easing = "ease-in-out";
+
+export const transition = `${duration}ms ${easing}`;
+
+export const tooltipDelay = {
+  enter: 500,
+  leave: 0,
+} as const;

package/src/design-system/colors-css.test.ts

@@ -0,0 +1,39 @@
+import {getEnumTextColor, getLinearGradient} from "./colors-css";
+
+describe("getLinearGradient", () => {
+  test("single color", () => {
+    expect(getLinearGradient(["#FF5400"])).toEqual("linear-gradient(to bottom, #FF5400 0%, #FF5400 100%)");
+  });
+
+  test("two colors", () => {
+    expect(getLinearGradient(["#FF5400", "#4978D4"])).toEqual(
+      "linear-gradient(to bottom, #FF5400 0%, #FF5400 50%, #4978D4 50%, #4978D4 100%)"
+    );
+  });
+
+  test("three colors", () => {
+    expect(getLinearGradient(["#FF5400", "#4978D4", "#08BD9F"])).toEqual(
+      "linear-gradient(to bottom, #FF5400 0%, #FF5400 33.33333333333333%, #4978D4 33.33333333333333%, #4978D4 66.66666666666666%, #08BD9F 66.66666666666666%, #08BD9F 100%)"
+    );
+  });
+
+  test("four colors", () => {
+    expect(getLinearGradient(["#FF5400", "#4978D4", "#08BD9F", "#FFFFFF"])).toEqual(
+      "linear-gradient(to bottom, #FF5400 0%, #FF5400 25%, #4978D4 25%, #4978D4 50%, #08BD9F 50%, #08BD9F 75%, #FFFFFF 75%, #FFFFFF 100%)"
+    );
+  });
+
+  test("card type colors subset", () => {
+    expect(getLinearGradient(["#4A4A4A", "#6A849B", "#99A2AB", "#D40915", "#E72065"])).toEqual(
+      "linear-gradient(to bottom, #4A4A4A 0%, #4A4A4A 20%, #6A849B 20%, #6A849B 40%, #99A2AB 40%, #99A2AB 60%, #D40915 60%, #D40915 80%, #E72065 80%, #E72065 100%)"
+    );
+  });
+});
+
+describe("getEnumTextColor", () => {
+  test("snapshot", () => {
+    expect(getEnumTextColor("#4978D4")).toMatchInlineSnapshot(
+      `"color-mix(in srgb, #4978D4 25%, var(--fibery-color-textColor) 75%)"`
+    );
+  });
+});

package/src/design-system/colors-css.ts

@@ -0,0 +1,25 @@
+import {themeVars} from "./theme";
+
+export function getLinearGradient(backgroundColors: Array<string>): string {
+  const parts = backgroundColors.flatMap((color, index, arr) => [
+    `${color} ${(index / arr.length) * 100}%`,
+    `${color} ${((index + 1) / arr.length) * 100}%`,
+  ]);
+  return `linear-gradient(to bottom, ${parts.join(", ")})`;
+}
+
+export function getEnumTextColor(color: string) {
+  return `color-mix(in srgb, ${color} 25%, ${themeVars.textColor} 75%)`;
+}
+
+function themeVarWithAlpha(themeVar: string, alpha: number) {
+  return `color-mix(in srgb, ${themeVar} ${Math.round(alpha * 100)}%, transparent)`;
+}
+
+export const dropCursorColor = themeVarWithAlpha(themeVars.primary, 0.7);
+
+export const shadows = {
+  border: `0 0 0 1px ${themeVars.shades.opacity10}`,
+  inversedBorder: `0 0 0 1px ${themeVars.lights.opacity10}`,
+  videoPreview: "0 4px 30px 4px rgba(0, 0, 0, .15)",
+} as const;

package/src/design-system/colors-js.test.ts

@@ -0,0 +1,232 @@
+import {getDarkenColor, getObjectColorMemoized as getObjectColor, getTextColor} from "./colors-js";
+import {getThemeColors} from "./theme";
+
+const testColors = [
+  "#FF5400", // red
+  "#4978D4", // blue
+  "#08BD9F", // green
+  "#FBA32F", // yellow/orange
+  "#673DB6", // purple
+  "#000000", // black
+  "#FFFFFF", // white
+];
+
+describe("getDarkenColor", () => {
+  test("snapshot", () => {
+    expect(testColors.map((color) => getDarkenColor(color))).toEqual([
+      "rgb(212,74,29)",
+      "rgb(70,98,162)",
+      "rgb(82,159,138)",
+      "rgb(214,143,56)",
+      "rgb(78,46,138)",
+      "rgb(0,0,0)",
+      "rgb(229,229,229)",
+    ]);
+  });
+});
+
+describe("getTextColor", () => {
+  test("snapshot", () => {
+    expect(testColors.map((color) => getTextColor(color))).toEqual([
+      "rgb(255,84,0)",
+      "rgb(73,120,212)",
+      "rgb(8,189,159)",
+      "rgb(251,163,47)",
+      "rgb(103,61,182)",
+      "rgb(0,0,0)",
+      "rgb(255,255,255)",
+    ]);
+  });
+});
+
+const themes = {
+  light: getThemeColors(null, "light"),
+  dark: getThemeColors(null, "dark"),
+  light2: getThemeColors(null, "light2"),
+};
+
+const colors = {
+  red: "#FF5400",
+  blue: "#4978D4",
+  green: "#08BD9F",
+  yellow: "#FBA32F",
+  purple: "#673DB6",
+  black: "#000000",
+  white: "#FFFFFF",
+} as const;
+
+function mapColors(fn: (color: string) => string) {
+  return Object.fromEntries(Object.entries(colors).map(([k, hex]) => [k, fn(hex)]));
+}
+
+describe("getEnumBackground", () => {
+  test("light", () => {
+    expect(mapColors(themes.light.fns.getEnumBackground)).toEqual({
+      black: "rgba(0,0,0,0.15)",
+      blue: "rgba(73,120,212,0.15)",
+      green: "rgba(8,189,159,0.15)",
+      purple: "rgba(103,61,182,0.15)",
+      red: "rgba(255,84,0,0.15)",
+      white: "rgba(255,255,255,0.15)",
+      yellow: "rgba(251,163,47,0.15)",
+    });
+  });
+  test("dark", () => {
+    expect(mapColors(themes.dark.fns.getEnumBackground)).toEqual({
+      black: "rgb(39,39,39)",
+      blue: "rgba(73,120,212,0.3)",
+      green: "rgba(8,189,159,0.3)",
+      purple: "rgba(103,61,182,0.3)",
+      red: "rgba(255,84,0,0.3)",
+      white: "rgba(255,255,255,0.3)",
+      yellow: "rgba(251,163,47,0.3)",
+    });
+  });
+  test("light2 defaults to light", () => {
+    expect(mapColors(themes.light2.fns.getEnumBackground)).toEqual(mapColors(themes.light.fns.getEnumBackground));
+  });
+});
+
+describe("getIconColor", () => {
+  test("light", () => {
+    expect(mapColors(themes.light.fns.getIconColor)).toEqual({
+      black: "rgba(0,0,0,0.95)",
+      blue: "rgba(73,120,212,0.95)",
+      green: "rgb(7,168,141)",
+      purple: "rgba(103,61,182,0.95)",
+      red: "rgba(255,84,0,0.95)",
+      white: "rgb(148,148,148)",
+      yellow: "rgb(219,126,4)",
+    });
+  });
+  test("dark", () => {
+    expect(mapColors(themes.dark.fns.getIconColor)).toEqual({
+      black: "rgb(130,130,130)",
+      blue: "rgb(84,128,215)",
+      green: "rgba(8,189,159,0.95)",
+      purple: "rgb(145,112,207)",
+      red: "rgba(255,84,0,0.95)",
+      white: "rgba(255,255,255,0.95)",
+      yellow: "rgba(251,163,47,0.95)",
+    });
+  });
+});
+
+describe("getAppIconBackground", () => {
+  test("light", () => {
+    expect(mapColors(themes.light.fns.getAppIconBackground)).toEqual({
+      black: "rgba(0,0,0,0.15)",
+      blue: "rgba(73,120,212,0.15)",
+      green: "rgba(8,189,159,0.15)",
+      purple: "rgba(103,61,182,0.15)",
+      red: "rgba(255,84,0,0.15)",
+      white: "rgba(255,255,255,0.15)",
+      yellow: "rgba(251,163,47,0.15)",
+    });
+  });
+  test("dark", () => {
+    expect(mapColors(themes.dark.fns.getAppIconBackground)).toEqual({
+      black: "rgb(39,39,39)",
+      blue: "rgba(73,120,212,0.3)",
+      green: "rgba(8,189,159,0.3)",
+      purple: "rgba(103,61,182,0.3)",
+      red: "rgba(255,84,0,0.3)",
+      white: "rgba(255,255,255,0.3)",
+      yellow: "rgba(251,163,47,0.3)",
+    });
+  });
+  test("light2 uses dark fn", () => {
+    expect(mapColors(themes.light2.fns.getAppIconBackground)).toEqual(mapColors(themes.dark.fns.getAppIconBackground));
+  });
+});
+
+describe("getLinkedHighlightBackground", () => {
+  test("light", () => {
+    expect(mapColors(themes.light.fns.getLinkedHighlightBackground)).toEqual({
+      black: "rgba(203,203,203,0.3)",
+      blue: "rgba(187,204,239,0.3)",
+      green: "rgba(125,220,204,0.3)",
+      purple: "rgba(210,198,234,0.3)",
+      red: "rgba(255,189,156,0.3)",
+      white: "rgba(203,203,203,0.3)",
+      yellow: "rgba(252,193,114,0.3)",
+    });
+  });
+  test("dark", () => {
+    expect(mapColors(themes.dark.fns.getLinkedHighlightBackground)).toEqual({
+      black: "rgba(188,188,188,0.4)",
+      blue: "rgba(165,188,234,0.4)",
+      green: "rgba(77,208,186,0.4)",
+      purple: "rgba(196,180,227,0.4)",
+      red: "rgba(255,166,122,0.4)",
+      white: "rgba(188,188,188,0.4)",
+      yellow: "rgba(251,171,65,0.4)",
+    });
+  });
+});
+
+describe("getLinkedHighlightDecorationBackground", () => {
+  test("light", () => {
+    expect(mapColors(themes.light.fns.getLinkedHighlightDecorationBackground)).toEqual({
+      black: "rgba(188,188,188,0.9)",
+      blue: "rgba(165,188,234,0.9)",
+      green: "rgba(77,208,186,0.9)",
+      purple: "rgba(196,180,227,0.9)",
+      red: "rgba(255,166,122,0.9)",
+      white: "rgba(188,188,188,0.9)",
+      yellow: "rgba(251,171,65,0.9)",
+    });
+  });
+  test("dark", () => {
+    expect(mapColors(themes.dark.fns.getLinkedHighlightDecorationBackground)).toEqual({
+      black: "rgba(178,178,178,0.9)",
+      blue: "rgba(155,178,223,0.9)",
+      green: "rgba(65,197,176,0.9)",
+      purple: "rgba(186,170,217,0.9)",
+      red: "rgba(244,156,113,0.9)",
+      white: "rgba(178,178,178,0.9)",
+      yellow: "rgba(240,161,55,0.9)",
+    });
+  });
+});
+
+describe("getObjectColor", () => {
+  test("empty name returns default", () => {
+    expect(getObjectColor("")).toEqual("#999999");
+  });
+
+  test("null/undefined returns default", () => {
+    expect(getObjectColor(null)).toEqual("#999999");
+    expect(getObjectColor(undefined)).toEqual("#999999");
+  });
+
+  test("typical entity names", () => {
+    expect(getObjectColor("Task")).toEqual("#d6895c");
+    expect(getObjectColor("Feature")).toEqual("#d47de8");
+    expect(getObjectColor("Bug")).toEqual("#cc33c2");
+    expect(getObjectColor("User Story")).toEqual("#85d3e0");
+    expect(getObjectColor("Epic")).toEqual("#e085cd");
+  });
+
+  test("database names", () => {
+    expect(getObjectColor("Product Management")).toEqual("#66b8ff");
+    expect(getObjectColor("Engineering")).toEqual("#ff002f");
+    expect(getObjectColor("Design")).toEqual("#0d18f2");
+  });
+
+  test("special characters", () => {
+    expect(getObjectColor("Task #1")).toEqual("#e87d89");
+    expect(getObjectColor("Feature (v2)")).toEqual("#f09e75");
+    expect(getObjectColor("Bug-123")).toEqual("#66c7ff");
+  });
+
+  test("long names", () => {
+    expect(getObjectColor("This is a very long entity name that might be used in some cases")).toEqual("#ff6694");
+  });
+
+  test("unicode names", () => {
+    expect(getObjectColor("Задача")).toEqual("#cc7a33");
+    expect(getObjectColor("機能")).toEqual("#72e619");
+    expect(getObjectColor("🚀 Feature")).toEqual("#dfe619");
+  });
+});

package/src/design-system/colors-js.ts

@@ -0,0 +1,107 @@
+import ColorHash from "color-hash";
+import {ThemeMode} from "../theme-settings";
+import {
+  clampRgb,
+  darkenChroma,
+  desaturateChroma,
+  produceColor,
+  set,
+  setAlpha,
+  setLuminanceChroma,
+  toCss,
+} from "../color-utils";
+import memoize from "lodash/memoize";
+import {getOpacities} from "./alpha";
+
+export const getDarkenColor = memoize((color: string): string => {
+  return produceColor(color, [(c) => darkenChroma(c, 0.5), clampRgb, (c) => desaturateChroma(c, 0.8)]);
+});
+
+export const getTextColor = memoize((color: string): string => {
+  return toCss(color);
+});
+
+export const getObjectColorMemoized = memoize((name) => {
+  if (!name) {
+    return "#999999";
+  }
+  const colorHash = new ColorHash({
+    lightness: [0.5, 0.6, 0.7],
+    saturation: [0.6, 0.7, 0.8, 0.9, 1],
+  });
+  return colorHash.hex(name);
+});
+
+export type TypeColors = ReturnType<typeof getTypeColors>;
+
+export function getTypeColors(color: string, theme: ThemeMode) {
+  const makeBrightenPrimary = () => {
+    return produceColor(color, [
+      (c) => setLuminanceChroma(c, 0.92),
+      (c) => desaturateChroma(c, 0.1),
+      (c) => setAlpha(c, 0.98),
+    ]);
+  };
+
+  const makeHeaderBg = () => {
+    return produceColor(color, [
+      (c) => setLuminanceChroma(c, 0.7),
+      (c) => desaturateChroma(c, 0.5),
+      (c) => set(c, "hsl.h", (h) => h + 2),
+    ]);
+  };
+
+  const makeLightDetailsBg = () => {
+    return produceColor(color, [(c) => setAlpha(c, 0.5), (c) => setLuminanceChroma(c, 0.85)]);
+  };
+
+  const makeDarkDetailsBg = () => {
+    return produceColor(color, [
+      (c) => setAlpha(c, 0.03),
+      (c) => setLuminanceChroma(c, 0.8),
+      (c) => desaturateChroma(c, 0.8),
+      (c) => darkenChroma(c, 0.1),
+    ]);
+  };
+
+  const makeFocus = () => {
+    return produceColor(color, (c) => setAlpha(c, 0.25));
+  };
+
+  const makeSeparator = () => {
+    return produceColor(color, (c) => setAlpha(c, 0.3));
+  };
+
+  const lightTypeColors = {
+    primary: color,
+    opacity: getOpacities(color),
+    darkenPrimary: getDarkenColor(color),
+    brightenPrimary: makeBrightenPrimary(),
+    headerBg: makeHeaderBg(),
+    detailsBg: makeLightDetailsBg(),
+    focus: makeFocus(),
+    separator: makeSeparator(),
+  };
+
+  const darkTypeColors = {
+    primary: color,
+    opacity: getOpacities(color),
+    darkenPrimary: getDarkenColor(color),
+    brightenPrimary: makeBrightenPrimary(),
+    headerBg: makeHeaderBg(),
+    detailsBg: makeDarkDetailsBg(),
+    focus: makeFocus(),
+    separator: makeSeparator(),
+  };
+
+  switch (theme) {
+    case "light":
+      return lightTypeColors;
+    case "dark":
+      return darkTypeColors;
+    case "light2":
+      return lightTypeColors;
+    default:
+      return lightTypeColors;
+  }
+}

package/src/design-system/colors.test.ts

@@ -0,0 +1,74 @@
+import {pickColors, type ThemeDefs} from "./colors";
+
+describe("pickColors", () => {
+  const themeDefs = {
+    colors: {
+      mode: ["light", "dark"],
+      colorAI: ["hsla(271, 57%, 61%, 1)", "hsla(272, 43%, 50%, 1)"],
+      transparent: ["rgba(255, 255, 255, 0)", "rgba(0, 0, 0, 0)"],
+      lights: [{opacity5: "light5"}, {opacity5: "dark-light5"}],
+      shades: [{opacity5: "shade5"}, {opacity5: "dark-shade5"}],
+      separators: [{opacity5: "separator5"}, {opacity5: "dark-separator5"}],
+    } as unknown as ThemeDefs["colors"],
+    fns: {
+      getIconColor: {light: (_: string) => "IconColor", dark: (_: string) => "DarkIconColor"},
+    } as unknown as ThemeDefs["fns"],
+  } satisfies Partial<ThemeDefs> as ThemeDefs;
+
+  test("light", () => {
+    expect(pickColors(themeDefs, "light")).toMatchInlineSnapshot(`
+      {
+        "colorAI": "hsla(271, 57%, 61%, 1)",
+        "lights": {
+          "opacity5": "light5",
+        },
+        "mode": "light",
+        "separators": {
+          "opacity5": "separator5",
+        },
+        "shades": {
+          "opacity5": "shade5",
+        },
+        "transparent": "rgba(255, 255, 255, 0)",
+      }
+    `);
+  });
+
+  test("dark", () => {
+    expect(pickColors(themeDefs, "dark")).toMatchInlineSnapshot(`
+      {
+        "colorAI": "hsla(272, 43%, 50%, 1)",
+        "lights": {
+          "opacity5": "dark-light5",
+        },
+        "mode": "dark",
+        "separators": {
+          "opacity5": "dark-separator5",
+        },
+        "shades": {
+          "opacity5": "dark-shade5",
+        },
+        "transparent": "rgba(0, 0, 0, 0)",
+      }
+    `);
+  });
+
+  test("light2 overrides mode", () => {
+    expect(pickColors(themeDefs, "light2")).toMatchInlineSnapshot(`
+      {
+        "colorAI": "hsla(271, 57%, 61%, 1)",
+        "lights": {
+          "opacity5": "light5",
+        },
+        "mode": "light2",
+        "separators": {
+          "opacity5": "separator5",
+        },
+        "shades": {
+          "opacity5": "shade5",
+        },
+        "transparent": "rgba(255, 255, 255, 0)",
+      }
+    `);
+  });
+});