@fibery/ui-kit 1.40.4 → 1.42.0

package/src/design-system/vars.ts

@@ -0,0 +1,52 @@
+import {ThemeColors} from "../design-system";
+import {typedObjectEntries} from "@fibery/helpers/utils/object";
+import type {Assert, Equals} from "@fibery/helpers/utils/types";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export const varPrefix = process.env.VAR_THEME_PREFIX || "fibery";
+
+export type ThemeVars = Omit<ThemeColors, "key" | "fns" | "select">;
+
+export function makeThemeVars(sample: ThemeColors) {
+  const vars = {} as Record<string, string | {[k: string]: string}>;
+  for (const [key, value] of typedObjectEntries(sample)) {
+    // LINT.IfChange("skipMetaKeys")
+    if (key === "key" || key === "fns" || key === "select") {
+      // LINT.ThenChange(["./theme.ts#skipMetaKeys", "./theme.test.ts#skipMetaKeys"])
+    } else if (key === "opacity") {
+      vars[key] = Object.fromEntries(
+        Object.keys(value).map((opacityKey) => [opacityKey, `var(--${varPrefix}-opacity-${opacityKey})`])
+      );
+    } else if (key === "shades") {
+      vars[key] = Object.fromEntries(
+        Object.keys(value).map((shadeKey) => [shadeKey, `var(--${varPrefix}-shades-${shadeKey})`])
+      );
+    } else if (key === "lights") {
+      vars[key] = Object.fromEntries(
+        Object.keys(value).map((lightKey) => [lightKey, `var(--${varPrefix}-lights-${lightKey})`])
+      );
+    } else if (key === "separators") {
+      vars[key] = Object.fromEntries(
+        Object.keys(value).map((separatorKey) => [separatorKey, `var(--${varPrefix}-separator-${separatorKey})`])
+      );
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      type _ = Assert<Equals<typeof value, string>>;
+      vars[key] = `var(--${varPrefix}-color-${key})`;
+    }
+  }
+  return vars as ThemeVars;
+}
+
+export const menuItemHeightVar = `--${varPrefix}-layout-menuItemHeight`;
+export const sidebarMenuItemHeightVar = `--${varPrefix}-layout-sidebarMenuItemHeight`;
+export const sidebarMenuIconSizeVar = `--${varPrefix}-layout-sidebarMenuIconSize`;
+export const listRowSurfaceFontSizeVar = `--${varPrefix}-layout-listRowSurfaceFontSize`;
+
+export const layoutVars = {
+  menuItemHeight: `var(${menuItemHeightVar})`,
+  sidebarMenuItemHeight: `var(${sidebarMenuItemHeightVar})`,
+  sidebarMenuIconSize: `var(${sidebarMenuIconSizeVar})`,
+  listRowSurfaceFontSize: `var(${listRowSurfaceFontSizeVar})`,
+};

package/src/design-system.test.ts

@@ -1,304 +1,47 @@
-import * as ds from "./design-system";
-import {makeThemeDefs, pickDarkColors, pickLight2Colors, pickLightColors} from "./design-system.colors";
-import {makeDefaultPalette} from "./palette-generator";
-
-function getKeys(colors: Record<string, string | Record<string, string>>) {
-  const keys = [];
-  for (const [key, value] of Object.entries(colors)) {
-    if (typeof value === "string") {
-      keys.push(key);
-    } else {
-      const nestedKeys: Record<string, string[]> = {[key]: []};
-      for (const [nestedKey] of Object.entries(value)) {
-        nestedKeys[key].push(nestedKey);
-      }
-      keys.push(nestedKeys);
-    }
-  }
-  return keys.sort();
-}
-
-const {
-  themeVars,
-  createInlineTheme,
-  getDarkenColor,
-  getEnumTextColor,
-  getLinearGradient,
-  getObjectColorMemoized,
-  getOpacities,
-  getTextColor,
-  getThemeColors,
-  getThemeValue,
-  ...rest
-} = ds;
-
-test("getThemeColors memoization", () => {
-  const modes = ["light", "dark", "light2"] as const;
-  const themes = modes.map((mode) => getThemeColors(null, mode));
-
-  // same input → same reference
-  modes.forEach((mode, i) => {
-    expect(getThemeColors("_", mode)).toBe(themes[i]);
-  });
-
-  // different modes → different references
-  expect(new Set(themes)).toMatchObject({size: modes.length});
-
-  // different modes → same keys
-  expect(new Set(themes.map(({fns: _, key: _k, ...colors}) => getKeys(colors).join(",")))).toMatchObject({size: 1});
-});
-
-test("snapshot rest", () => {
-  expect(rest).toMatchSnapshot();
-});
-
-test("snapshot themeColors", () => {
-  const {colors, ...rest} = makeThemeDefs(makeDefaultPalette());
-  expect({...colors, ...rest}).toMatchSnapshot();
-});
-
-test("snapshot themeVars", () => {
-  expect(themeVars).toMatchSnapshot();
-});
-
-const testColors = [
-  "#FF5400", // brand red
-  "#4978D4", // brand blue
-  "#08BD9F", // brand green
-  "#000000", // black
-  "#FFFFFF", // white
-  "rgb(73, 120, 212)", // rgb format
-  "hsl(220, 62%, 56%)", // hsl format
-];
-
-const testColorsForThemed = [
-  "#FF5400", // red
-  "#4978D4", // blue
-  "#08BD9F", // green
-  "#FBA32F", // yellow/orange
-  "#673DB6", // purple
-  "#000000", // black
-  "#FFFFFF", // white
-];
-
-describe("getOpacities", () => {
-  test.each(testColors)("snapshot for %s", (color) => {
-    expect(getOpacities(color)).toMatchSnapshot();
-  });
-
-  test("transparent color", () => {
-    expect(getOpacities("rgba(255, 255, 255, 0)")).toMatchSnapshot();
-  });
-});
-
-describe("getDarkenColor", () => {
-  test.each(testColors)("snapshot for %s", (color) => {
-    expect(getDarkenColor(color)).toMatchSnapshot();
-  });
-});
-
-describe("getTextColor", () => {
-  test.each(testColors)("snapshot for %s", (color) => {
-    expect(getTextColor(color)).toMatchSnapshot();
-  });
-});
-
-describe("getLinearGradient", () => {
-  test("single color", () => {
-    expect(getLinearGradient(["#FF5400"])).toMatchSnapshot();
-  });
-
-  test("two colors", () => {
-    expect(getLinearGradient(["#FF5400", "#4978D4"])).toMatchSnapshot();
-  });
-
-  test("three colors", () => {
-    expect(getLinearGradient(["#FF5400", "#4978D4", "#08BD9F"])).toMatchSnapshot();
-  });
-
-  test("four colors", () => {
-    expect(getLinearGradient(["#FF5400", "#4978D4", "#08BD9F", "#FFFFFF"])).toMatchSnapshot();
-  });
-
-  test("card type colors subset", () => {
-    expect(getLinearGradient(["#4A4A4A", "#6A849B", "#99A2AB", "#D40915", "#E72065"])).toMatchSnapshot();
-  });
-});
-
-describe("getThemeColors", () => {
-  test("light theme", () => {
-    expect(getThemeColors("#4978D4", "light")).toMatchSnapshot();
-  });
-
-  test("dark theme", () => {
-    expect(getThemeColors("#4978D4", "dark")).toMatchSnapshot();
-  });
-
-  test("light2 theme", () => {
-    expect(getThemeColors("#4978D4", "light2")).toMatchSnapshot();
-  });
-});
-
-describe("getThemeValue", () => {
-  const values = {light: "light-value", light2: "light2-value", dark: "dark-value"};
-
-  test("light theme", () => {
-    expect(getThemeValue("light", values)).toMatchSnapshot();
-  });
-
-  test("dark theme", () => {
-    expect(getThemeValue("dark", values)).toMatchSnapshot();
-  });
-
-  test("light2 theme", () => {
-    expect(getThemeValue("light2", values)).toMatchSnapshot();
-  });
-
-  test("fallback to light when key missing", () => {
-    expect(getThemeValue("light", {light: "fallback", dark: "dark"})).toMatchSnapshot();
-  });
-});
-
-describe("getLightColors", () => {
-  test("snapshot", () => {
-    expect(pickLightColors(makeThemeDefs(makeDefaultPalette()))).toMatchSnapshot();
-  });
-});
-
-describe("getDarkColors", () => {
-  test("snapshot", () => {
-    expect(pickDarkColors(makeThemeDefs(makeDefaultPalette()))).toMatchSnapshot();
-  });
-});
-
-describe("getLight2Colors", () => {
-  test("snapshot", () => {
-    expect(pickLight2Colors(makeThemeDefs(makeDefaultPalette()))).toMatchSnapshot();
-  });
-});
-
-const themes = {
-  light: getThemeColors(null, "light"),
-  dark: getThemeColors(null, "dark"),
-  light2: getThemeColors(null, "light2"),
-};
-
-describe("getEnumBackgroundColor", () => {
-  describe.each(["light", "dark", "light2"] as const)("%s theme", (mode) => {
-    test.each(testColorsForThemed)("snapshot for %s", (color) => {
-      expect(themes[mode].fns.getEnumBackground(color)).toMatchSnapshot();
-    });
-  });
-});
-
-describe("getIconColor", () => {
-  describe.each(["light", "dark"] as const)("%s theme", (mode) => {
-    test.each(testColorsForThemed)("snapshot for %s", (color) => {
-      expect(themes[mode].fns.getIconColor(color)).toMatchSnapshot();
-    });
-  });
-});
-
-describe("getAppIconBackgroundColor", () => {
-  describe.each(["light", "dark", "light2"] as const)("%s theme", (mode) => {
-    test.each(testColorsForThemed)("snapshot for %s", (color) => {
-      expect(themes[mode].fns.getAppIconBackground(color)).toMatchSnapshot();
-    });
-  });
-});
-
-describe("getLinkedHighlightBackgroundColor", () => {
-  const highlightColors = ["#FF5400", "#4978D4", "#08BD9F", "#FBA32F", "#673DB6"];
-
-  describe.each(["light", "dark"] as const)("%s theme", (mode) => {
-    test.each(highlightColors)("snapshot for %s", (color) => {
-      expect(themes[mode].fns.getLinkedHighlightBackground(color)).toMatchSnapshot();
-    });
-  });
-});
-
-describe("getLinkedHighlightDecorationBackgroundColor", () => {
-  const highlightColors = ["#FF5400", "#4978D4", "#08BD9F", "#FBA32F", "#673DB6"];
-
-  describe.each(["light", "dark"] as const)("%s theme", (mode) => {
-    test.each(highlightColors)("snapshot for %s", (color) => {
-      expect(themes[mode].fns.getLinkedHighlightDecorationBackground(color)).toMatchSnapshot();
-    });
-  });
-});
-
-describe("getEnumTextColor", () => {
-  test.each(testColorsForThemed)("snapshot for %s", (color) => {
-    expect(getEnumTextColor(color)).toMatchSnapshot();
-  });
-});
-
-describe("getObjectColorMemoized", () => {
-  test("empty name returns default", () => {
-    expect(getObjectColorMemoized("")).toMatchSnapshot();
-  });
-
-  test("null/undefined returns default", () => {
-    expect(getObjectColorMemoized(null)).toMatchSnapshot();
-    expect(getObjectColorMemoized(undefined)).toMatchSnapshot();
-  });
-
-  test("typical entity names", () => {
-    expect(getObjectColorMemoized("Task")).toMatchSnapshot();
-    expect(getObjectColorMemoized("Feature")).toMatchSnapshot();
-    expect(getObjectColorMemoized("Bug")).toMatchSnapshot();
-    expect(getObjectColorMemoized("User Story")).toMatchSnapshot();
-    expect(getObjectColorMemoized("Epic")).toMatchSnapshot();
-  });
-
-  test("database names", () => {
-    expect(getObjectColorMemoized("Product Management")).toMatchSnapshot();
-    expect(getObjectColorMemoized("Engineering")).toMatchSnapshot();
-    expect(getObjectColorMemoized("Design")).toMatchSnapshot();
-  });
-
-  test("special characters", () => {
-    expect(getObjectColorMemoized("Task #1")).toMatchSnapshot();
-    expect(getObjectColorMemoized("Feature (v2)")).toMatchSnapshot();
-    expect(getObjectColorMemoized("Bug-123")).toMatchSnapshot();
-  });
-
-  test("long names", () => {
-    expect(
-      getObjectColorMemoized("This is a very long entity name that might be used in some cases")
-    ).toMatchSnapshot();
-  });
-
-  test("unicode names", () => {
-    expect(getObjectColorMemoized("Задача")).toMatchSnapshot();
-    expect(getObjectColorMemoized("機能")).toMatchSnapshot();
-    expect(getObjectColorMemoized("🚀 Feature")).toMatchSnapshot();
-  });
-});
-
-describe("createInlineTheme", () => {
-  test("light theme with default reject keys", () => {
-    const theme = getThemeColors("#4978D4", "light");
-    expect(createInlineTheme(theme)).toMatchSnapshot();
-  });
-
-  test("dark theme with default reject keys", () => {
-    const theme = getThemeColors("#4978D4", "dark");
-    expect(createInlineTheme(theme)).toMatchSnapshot();
-  });
-
-  test("light2 theme with default reject keys", () => {
-    const theme = getThemeColors("#4978D4", "light2");
-    expect(createInlineTheme(theme)).toMatchSnapshot();
-  });
-
-  test("with custom reject keys (empty array - include all)", () => {
-    const theme = getThemeColors("#4978D4", "light");
-    expect(createInlineTheme(theme, [])).toMatchSnapshot();
-  });
-
-  test("with custom reject keys (specific keys)", () => {
-    const theme = getThemeColors("#4978D4", "light");
-    expect(createInlineTheme(theme, ["primary", "darkenPrimary"])).toMatchSnapshot();
-  });
+import * as exports from "./design-system";
+
+test("exports", () => {
+  expect(Object.keys(exports).toSorted()).toEqual(
+    [
+      "border",
+      "cardTypeColors",
+      "createInlineStyles",
+      "dateFormat",
+      "dateTimeFormat",
+      "dropCursorColor",
+      "duration",
+      "easing",
+      "fontFamily",
+      "fontSize",
+      "fontWeight",
+      "getDarkenColor",
+      "getEnumTextColor",
+      "getLinearGradient",
+      "getObjectColorMemoized",
+      "getOpacities",
+      "getTextColor",
+      "getThemeColors",
+      "iconSize",
+      "layout",
+      "layoutVars",
+      "lineHeight",
+      "listRowSurfaceFontSizeVar",
+      "menuItemHeightVar",
+      "minPanelWidth",
+      "opacity",
+      "shadows",
+      "sidebarMenuIconSizeVar",
+      "sidebarMenuItemHeightVar",
+      "space",
+      "spaceNestedTreeInterval",
+      "spaceNestedTreeLevel",
+      "textStyles",
+      "themeVars",
+      "timeFormat",
+      "tooltipDelay",
+      "transition",
+      "typeSizes",
+      "viewBoxSize",
+    ].toSorted()
+  );
 });