@fibery/ui-kit 2.0.1 → 2.1.1

package/src/design-system/animation.ts

@@ -1,10 +1,29 @@
-export const duration = 120;
-
-export const easing = "ease-in-out";
-
-export const transition = `${duration}ms ${easing}`;
+import mapValues from "lodash/mapValues";
 
 export const tooltipDelay = {
   enter: 500,
   leave: 0,
 } as const;
+
+export const durations = {
+  faster: 120,
+  fast: 150,
+  normal: 200,
+  slow: 300,
+  slower: 400,
+} as const;
+
+const timingFunction = {
+  default: "ease-in-out",
+  decelerate: "cubic-bezier(0.2, 0, 0, 1)",
+} as const;
+
+export const transitionDuration = mapValues(durations, (ms) => `${ms}ms`);
+
+export const transitions = {
+  ...mapValues(transitionDuration, (ms) => `${ms} ${timingFunction.default}`),
+  decelerate: mapValues(transitionDuration, (ms) => `${ms} ${timingFunction.decelerate}`),
+};
+
+/** @deprecated inline */
+export const transition = transitions.faster;

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

@@ -12,14 +12,30 @@ export function getEnumTextColor(color: string) {
   return `color-mix(in srgb, ${color} 40%, ${themeVars.textColor} 60%)`;
 }
 
+/** Border on filled background swatches */
+export function getBgSwatchBorderColor(fill: string) {
+  return `light-dark(
+    oklch(from ${fill} calc(l * 0.9) calc(c * 1.6) h),
+    oklch(from ${fill} calc(l * 1.5) calc(c * 1.5) h)
+  )`;
+}
+
+/** Opaque fill for palette swatches */
+export function getBgSwatchFillColor(fill: string) {
+  return `light-dark(
+    oklch(from ${fill} calc(l * 0.98) calc(c * 1.25) h),
+    oklch(from ${fill} calc(l * 1.25) calc(c * 1.65) h)
+  )`;
+}
+
 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 dropCursorColor = themeVarWithAlpha(themeVars.colorAccent, 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)",
+  border: `0 0 0 1px ${themeVars.colorShadowBorder}`,
+  inversedBorder: `0 0 0 1px ${themeVars.separatorColor}`,
+  alphaCheckerboard: `repeating-conic-gradient(${themeVars.separatorColor} 0% 25%, transparent 0% 50%) 50% / 8px 8px`,
 } as const;

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

@@ -1,192 +1,182 @@
-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
-];
+import {
+  getDarkenColor,
+  getObjectColorMemoized as getObjectColor,
+  getTextColor,
+  makeAdaptiveBgFg,
+  makeSelect,
+} from "./colors-js";
+import {themeFromPalette} from "./theme";
+import {selectPalette} from "../palette-generator";
+import {withColorDiff} from "../palettes/diff-colors";
+
+const colors = {
+  red: "#ff5401",
+  blue: "#4978d4",
+  green: "#07bd9f",
+  yellow: "#fba32e",
+  purple: "#673db6",
+  black: "#000000",
+  white: "#ffffff",
+} as const;
+
+function mapColors(fn: (color: string) => string) {
+  return withColorDiff(Object.fromEntries(Object.entries(colors).map(([k, hex]) => [k, fn(hex)])));
+}
 
 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)",
-    ]);
+    expect(mapColors(getDarkenColor)).toMatchInlineSnapshot(`
+      {
+        "black": "rgb(0, 0, 0)",
+        "blue": "rgb(70, 98, 162)",
+        "green": "rgb(82, 159, 138)",
+        "purple": "rgb(78, 46, 138)",
+        "red": "rgb(213, 74, 29)",
+        "white": "rgb(229, 229, 229)",
+        "yellow": "rgb(214, 143, 55)",
+      }
+    `);
   });
 });
 
 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)",
-    ]);
+    expect(mapColors(getTextColor)).toMatchInlineSnapshot(`
+      {
+        "black": "rgb(0, 0, 0)",
+        "blue": "rgb(73, 120, 212)",
+        "green": "rgb(7, 189, 159)",
+        "purple": "rgb(103, 61, 182)",
+        "red": "rgb(255, 84, 1)",
+        "white": "rgb(255, 255, 255)",
+        "yellow": "rgb(251, 163, 46)",
+      }
+    `);
   });
 });
 
-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)]));
-}
+const adaptive = makeAdaptiveBgFg("#FFFFFF", "#0D0D0D");
 
-describe("getEnumBackground", () => {
+describe("adaptive.bg", () => {
   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)",
-    });
+    expect(mapColors(adaptive.bg[0])).toMatchInlineSnapshot(`
+      {
+        "black": "rgb(217, 217, 217)",
+        "blue": "rgb(228, 235, 249)",
+        "green": "rgb(218, 245, 241)",
+        "purple": "rgb(232, 226, 244)",
+        "red": "rgb(255, 229, 217)",
+        "white": "rgb(255, 255, 255)",
+        "yellow": "rgb(254, 241, 224)",
+      }
+    `);
   });
   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));
+    expect(mapColors(adaptive.bg[1])).toMatchInlineSnapshot(`
+      {
+        "black": "rgb(39, 39, 39)",
+        "blue": "rgb(31, 45, 73)",
+        "green": "rgb(11, 66, 57)",
+        "purple": "rgb(46, 31, 73)",
+        "red": "rgb(86, 34, 9)",
+        "white": "rgb(86, 86, 86)",
+        "yellow": "rgb(84, 58, 23)",
+      }
+    `);
   });
 });
 
-describe("getIconColor", () => {
+describe("adaptive.fg", () => {
   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)",
-    });
+    expect(mapColors(adaptive.fg[0])).toMatchInlineSnapshot(`
+      {
+        "black": "rgb(13, 13, 13)",
+        "blue": "rgb(82, 127, 214)",
+        "green": "rgb(17, 168, 143)",
+        "purple": "rgb(111, 71, 186)",
+        "red": "rgb(255, 93, 14)",
+        "white": "rgb(149, 149, 149)",
+        "yellow": "rgb(218, 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)",
-    });
+    expect(mapColors(adaptive.fg[1])).toMatchInlineSnapshot(`
+      {
+        "black": "rgb(129, 129, 129)",
+        "blue": "rgb(88, 128, 207)",
+        "green": "rgb(7, 180, 152)",
+        "purple": "rgb(145, 112, 207)",
+        "red": "rgb(243, 80, 2)",
+        "white": "rgb(243, 243, 243)",
+        "yellow": "rgb(239, 156, 44)",
+      }
+    `);
   });
 });
 
-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));
-  });
-});
+const palette = selectPalette();
+const themes = {
+  light: themeFromPalette(palette, "light"),
+  dark: themeFromPalette(palette, "dark"),
+  light2: themeFromPalette(palette, "light2"),
+};
 
 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)",
-    });
+    expect(mapColors(themes.light.fns.getLinkedHighlightBackground)).toMatchInlineSnapshot(`
+      {
+        "black": "rgba(203, 203, 203, 0.3)",
+        "blue": "rgba(187, 204, 239, 0.3)",
+        "green": "rgba(124, 220, 204, 0.3)",
+        "purple": "rgba(210, 198, 234, 0.3)",
+        "red": "rgba(255, 189, 157, 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)",
-    });
+    expect(mapColors(themes.dark.fns.getLinkedHighlightBackground)).toMatchInlineSnapshot(`
+      {
+        "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, 123, 0.4)",
+        "white": "rgba(188, 188, 188, 0.4)",
+        "yellow": "rgba(251, 171, 64, 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)",
-    });
+    expect(mapColors(themes.light.fns.getLinkedHighlightDecorationBackground)).toMatchInlineSnapshot(`
+      {
+        "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, 123, 0.9)",
+        "white": "rgba(188, 188, 188, 0.9)",
+        "yellow": "rgba(251, 171, 64, 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)",
-    });
+    expect(mapColors(themes.dark.fns.getLinkedHighlightDecorationBackground)).toMatchInlineSnapshot(`
+      {
+        "black": "rgba(178, 178, 178, 0.9)",
+        "blue": "rgba(155, 178, 223, 0.9)",
+        "green": "rgba(64, 197, 176, 0.9)",
+        "purple": "rgba(186, 170, 217, 0.9)",
+        "red": "rgba(244, 156, 114, 0.9)",
+        "white": "rgba(178, 178, 178, 0.9)",
+        "yellow": "rgba(240, 161, 54, 0.9)",
+      }
+    `);
   });
 });
 
@@ -230,3 +220,27 @@ describe("getObjectColor", () => {
     expect(getObjectColor("🚀 Feature")).toEqual("#dfe619");
   });
 });
+
+describe("select", () => {
+  test("light theme", () => {
+    expect(
+      makeSelect("light")({light: "light-value", light2: "light2-value", dark: "dark-value"})
+    ).toMatchInlineSnapshot(`"light-value"`);
+  });
+
+  test("dark theme", () => {
+    expect(
+      makeSelect("dark")({light: "light-value", light2: "light2-value", dark: "dark-value"})
+    ).toMatchInlineSnapshot(`"dark-value"`);
+  });
+
+  test("light2 theme", () => {
+    expect(
+      makeSelect("dark")({light: "light-value", light2: "light2-value", dark: "dark-value"})
+    ).toMatchInlineSnapshot(`"dark-value"`);
+  });
+
+  test("light2 theme falls back to light when key is not defined", () => {
+    expect(makeSelect("light2")({light: "fallback", dark: "dark"})).toMatchInlineSnapshot(`"fallback"`);
+  });
+});

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

@@ -1,27 +1,26 @@
 import ColorHash from "color-hash";
-import {ThemeMode} from "../theme-settings";
-import {
-  clampRgb,
-  darkenChroma,
-  desaturateChroma,
-  produceColor,
-  set,
-  setAlpha,
-  setLuminanceChroma,
-  toCss,
-} from "../color-utils";
+import {clampRgb, darkenChroma, desaturateChroma, produceColor, cssFromUnsafe} from "../color-utils";
 import memoize from "lodash/memoize";
-import {getOpacities} from "./alpha";
+import {a11yColor} from "../a11y-color";
+import {alpha} from "./alpha";
+import {ThemeMode} from "../theme-settings";
+import {Color} from "culori";
 
+/** @deprecated switch from this ported chroma impl to color-utils oklch transformations at first convenience */
 export const getDarkenColor = memoize((color: string): string => {
-  return produceColor(color, [(c) => darkenChroma(c, 0.5), clampRgb, (c) => desaturateChroma(c, 0.8)]);
+  return produceColor(color, [
+    (c) => darkenChroma(c, 0.5),
+    clampRgb as (_: Color) => Color,
+    (c) => desaturateChroma(c, 0.8),
+  ]);
 });
 
+/** @deprecated identity for a while. inline */
 export const getTextColor = memoize((color: string): string => {
-  return toCss(color);
+  return cssFromUnsafe(color);
 });
 
-export const getObjectColorMemoized = memoize((name) => {
+export const getObjectColorMemoized = memoize((name: string | null | undefined) => {
   if (!name) {
     return "#999999";
   }
@@ -32,76 +31,22 @@ export const getObjectColorMemoized = memoize((name) => {
   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(),
-  };
+export const makeAdaptiveBgFg = (bgWhite: string, bgBlack: string) => ({
+  bg: [
+    (color: string) => a11yColor(alpha(color, 0.15), bgWhite, 1),
+    (color: string) => a11yColor(alpha(color, 0.3), bgBlack, 1.3),
+  ],
+  fg: [
+    (color: string) => a11yColor(alpha(color, 0.95), bgWhite, 3),
+    (color: string) => a11yColor(alpha(color, 0.95), bgBlack, 5),
+  ],
+});
 
-  const darkTypeColors = {
-    primary: color,
-    opacity: getOpacities(color),
-    darkenPrimary: getDarkenColor(color),
-    brightenPrimary: makeBrightenPrimary(),
-    headerBg: makeHeaderBg(),
-    detailsBg: makeDarkDetailsBg(),
-    focus: makeFocus(),
-    separator: makeSeparator(),
+export function makeSelect(mode: ThemeMode) {
+  return function select<T>(values: {light: T; light2?: T; dark: T}): T {
+    if (mode in values) {
+      return values[mode]!;
+    }
+    return values.light;
   };
-
-  switch (theme) {
-    case "light":
-      return lightTypeColors;
-    case "dark":
-      return darkTypeColors;
-    case "light2":
-      return lightTypeColors;
-    default:
-      return lightTypeColors;
-  }
 }

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

@@ -1,6 +1,6 @@
-import {pickColors, type ThemeDefs} from "./colors";
+import {sideFromDefs, type ThemeDefs} from "./colors";
 
-describe("pickColors", () => {
+describe("sideFromDefs", () => {
   const themeDefs = {
     colors: {
       mode: ["light", "dark"],
@@ -16,7 +16,7 @@ describe("pickColors", () => {
   } satisfies Partial<ThemeDefs> as ThemeDefs;
 
   test("light", () => {
-    expect(pickColors(themeDefs, "light")).toMatchInlineSnapshot(`
+    expect(sideFromDefs(themeDefs, "light").colors).toMatchInlineSnapshot(`
       {
         "colorAI": "hsla(271, 57%, 61%, 1)",
         "lights": {
@@ -35,7 +35,7 @@ describe("pickColors", () => {
   });
 
   test("dark", () => {
-    expect(pickColors(themeDefs, "dark")).toMatchInlineSnapshot(`
+    expect(sideFromDefs(themeDefs, "dark").colors).toMatchInlineSnapshot(`
       {
         "colorAI": "hsla(272, 43%, 50%, 1)",
         "lights": {
@@ -54,7 +54,7 @@ describe("pickColors", () => {
   });
 
   test("light2 overrides mode", () => {
-    expect(pickColors(themeDefs, "light2")).toMatchInlineSnapshot(`
+    expect(sideFromDefs(themeDefs, "light2").colors).toMatchInlineSnapshot(`
       {
         "colorAI": "hsla(271, 57%, 61%, 1)",
         "lights": {