@fibery/ui-kit 1.40.3 → 1.41.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,24 +1,47 @@
-import {getLightColors, getDarkColors, getLight2Colors} from "./design-system";
+import * as exports from "./design-system";
 
-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();
-}
-it("dark and light color should have the same keys", () => {
-  const lKeys = getKeys(getLightColors());
-  const dKeys = getKeys(getDarkColors());
-  const l2Keys = getKeys(getLight2Colors());
-  expect(lKeys).toEqual(dKeys);
-  expect(l2Keys).toEqual(dKeys);
+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()
+  );
 });