@fibery/ui-kit 1.40.4 → 1.42.0

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

@@ -0,0 +1,94 @@
+import {createInlineStyles, getThemeColors, makeThemeApi, ThemeColors} from "./theme";
+import {ThemePalette} from "../palette-generator";
+import {ThemeDefs} from "./colors";
+import {ThemeMode, themeModes} from "../theme-settings";
+import {typedObjectEntries} from "@fibery/helpers/utils/object";
+
+describe("select", () => {
+  function makeSelect(mode: ThemeMode) {
+    return makeThemeApi({key: "smth"} as ThemePalette, {fns: {}} as ThemeDefs, mode).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"`);
+  });
+});
+
+test("getThemeColors memoization", () => {
+  function getKeys(colors: ThemeColors) {
+    const keys = [];
+    for (const [key, value] of typedObjectEntries(colors)) {
+      // LINT.IfChange("skipMetaKeys")
+      if (key === "key" || key === "fns" || key === "select") {
+        // LINT.ThenChange(["./theme.ts#skipMetaKeys", "./vars.ts#skipMetaKeys")
+        continue;
+      }
+      if (typeof value === "string") {
+        keys.push(key);
+      } else {
+        const nestedKeys: Record<string, string[]> = {[key]: []};
+        for (const [nestedKey] of typedObjectEntries(value)) {
+          nestedKeys[key].push(nestedKey);
+        }
+        keys.push(nestedKeys);
+      }
+    }
+    return keys.sort();
+  }
+
+  const themes = themeModes.map((mode) => getThemeColors(null, mode));
+
+  // same input → same reference
+  themeModes.forEach((mode, i) => {
+    expect(getThemeColors(null, mode)).toBe(themes[i]);
+  });
+
+  // different modes → different references
+  expect(new Set(themes)).toMatchObject({size: themeModes.length});
+
+  // different modes → same keys
+  expect(new Set(themes.map((theme) => getKeys(theme).join(",")))).toMatchObject({size: 1});
+});
+
+describe("createInlineStyles", () => {
+  it("maps provided theme to css props", () => {
+    const theme = {
+      key: "key",
+      mode: "light2",
+      fns: {getIconColor: (_: string) => "IconColor"} satisfies Partial<ThemeColors["fns"]> as ThemeColors["fns"],
+      lights: {opacity5: "light5"} as ThemeColors["lights"],
+      shades: {opacity5: "shade5"} as ThemeColors["shades"],
+      separators: {opacity5: "separator5"} as ThemeColors["separators"],
+      transparent: "rgba(255, 255, 255, 0)",
+      colorAI: "rgb(157, 99, 212)",
+    } satisfies Partial<ThemeColors> as ThemeColors;
+    expect(createInlineStyles(theme)).toMatchInlineSnapshot(`
+      {
+        "--fibery-color-colorAI": "rgb(157, 99, 212)",
+        "--fibery-color-mode": "light2",
+        "--fibery-color-transparent": "rgba(255, 255, 255, 0)",
+        "--fibery-lights-opacity5": "light5",
+        "--fibery-separator-opacity5": "separator5",
+        "--fibery-shades-opacity5": "shade5",
+      }
+    `);
+  });
+});

package/src/design-system/theme.ts

@@ -0,0 +1,93 @@
+import {Colors, makeThemeDefs, pickColors, pickFns, ThemeDefs} from "./colors";
+import {getTypeColors, TypeColors} from "./colors-js";
+import {ThemeMode} from "../theme-settings";
+import {defaultPaletteKey, makeDefaultPalette, ThemePalette} from "../palette-generator";
+import memoize from "lodash/memoize";
+import {makeThemeVars, varPrefix} from "./vars";
+import {typedObjectEntries} from "@fibery/helpers/utils/object";
+
+export function makeThemeApi(palette: ThemePalette, defs: ThemeDefs, mode: ThemeMode) {
+  return {
+    key: `${palette.key}-${mode}`,
+    fns: pickFns(defs.fns, mode),
+    select<T>(values: {light: T; light2?: T; dark: T}): T {
+      if (mode in values) {
+        return values[mode]!;
+      }
+      return values.light;
+    },
+  };
+}
+
+type ThemeApi = ReturnType<typeof makeThemeApi>;
+
+// TODO rename into Theme
+export type ThemeColors = ThemeApi & TypeColors & Colors;
+
+/**
+ * @deprecated do NOT add new consumers in production code.
+ * Your helpers from now on are:
+ *  themeVars (for CSS statics) and
+ *  useTheme() (for dynamic calculations in js, for canvas)
+ */
+export const getThemeColors = memoize(
+  (_: string | null, mode: ThemeMode, palette: ThemePalette = makeDefaultPalette()): ThemeColors => {
+    const defs = makeThemeDefs(palette);
+
+    return {
+      ...makeThemeApi(palette, defs, mode),
+      ...getTypeColors(palette.accent[9], mode),
+      ...pickColors(defs, mode),
+    };
+  },
+  (_, mode, palette) => `${palette?.key ?? defaultPaletteKey}-${mode}`
+);
+
+export const themeVars = makeThemeVars(getThemeColors(null, "light"));
+
+export type ThemeStyles = Record<string, string>;
+
+function createInlineStylesImpl(themes: ThemeColors): ThemeStyles {
+  return typedObjectEntries(themes).reduce<ThemeStyles>((inlineTheme, [key, value]) => {
+    // LINT.IfChange("skipMetaKeys")
+    if (key === "key" || key === "fns" || key === "select") {
+      // LINT.ThenChange(["./vars.ts#skipMetaKeys", "./theme.test.ts#skipMetaKeys"])
+      return inlineTheme;
+    }
+    if (key === "opacity") {
+      Object.entries(themes.opacity as Record<string, string>).forEach(([opacityKey, opacityValue]) => {
+        inlineTheme[`--${varPrefix}-opacity-${opacityKey}`] = opacityValue;
+      }, "");
+
+      return inlineTheme;
+    }
+    if (key === "shades") {
+      Object.entries(themes.shades as Record<string, string>).forEach(([shadeKey, shadeValue]) => {
+        inlineTheme[`--${varPrefix}-shades-${shadeKey}`] = shadeValue;
+      }, "");
+
+      return inlineTheme;
+    }
+    if (key === "lights") {
+      Object.entries(themes.lights as Record<string, string>).forEach(([lightKey, lightValue]) => {
+        inlineTheme[`--${varPrefix}-lights-${lightKey}`] = lightValue;
+      }, "");
+
+      return inlineTheme;
+    }
+    if (key === "separators") {
+      Object.entries(themes.separators as Record<string, string>).forEach(([separatorKey, separatorValue]) => {
+        inlineTheme[`--${varPrefix}-separator-${separatorKey}`] = separatorValue;
+      }, "");
+
+      return inlineTheme;
+    }
+    inlineTheme[`--${varPrefix}-color-${key}`] = value;
+    return inlineTheme;
+  }, {});
+}
+
+export const createInlineStyles = memoize(
+  (theme: ThemeColors) => createInlineStylesImpl(theme),
+  (theme) => theme.key
+);

package/src/design-system/typography.ts

@@ -0,0 +1,179 @@
+import {themeVars} from "./theme";
+import {transition} from "./animation";
+import {border} from "./layout";
+
+export const lineHeight = {
+  text: 1.6,
+  regular: 1.5,
+  narrow: 1.4,
+  heading: 1.3,
+  nowrap: 1,
+} as const;
+
+export const typeSizes = [30, 24, 18, 16, 14, 12, 10, 8] as const;
+
+// 300 basic, 310 experiment with a variable Inter
+export const fontSize = {
+  xxl: 30,
+  xl: 24,
+  lg: 18,
+  md: 16,
+  sm: 15,
+  xs: 14,
+  xxs: 13,
+  xxxs: 12,
+  tiny: 11,
+  mini: 10,
+  micro: 9,
+  nano: 8,
+} as const;
+
+export const fontFamily =
+  '"Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif';
+
+export const fontWeight = {
+  light: 310, // 300 basic, 310 experiment with a variable Inter
+  regular: 410, // 400 basic, 410 experiment with a variable Inter
+  mediumLight: 450,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+} as const;
+
+export const textStyles = {
+  heading1: {
+    fontFamily,
+    fontSize: typeSizes[0],
+    letterSpacing: "-0.01em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+  },
+  heading2: {
+    fontFamily,
+    fontSize: typeSizes[1],
+    letterSpacing: "-0.002em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+  },
+  heading3: {
+    fontFamily,
+    fontSize: typeSizes[2],
+    letterSpacing: "-0.002em",
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+  },
+  heading4: {
+    fontFamily,
+    fontSize: typeSizes[3],
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+  },
+  heading5: {
+    fontFamily,
+    fontSize: typeSizes[4],
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.semibold,
+    color: themeVars.textColor,
+  },
+  heading6: {
+    fontFamily,
+    fontSize: typeSizes[5],
+    lineHeight: lineHeight.heading,
+    letterSpacing: 0.6,
+    textTransform: "uppercase",
+    fontWeight: fontWeight.regular,
+    color: themeVars.textColor,
+  },
+  heading7: {
+    fontFamily,
+    fontSize: typeSizes[6],
+    lineHeight: lineHeight.heading,
+    letterSpacing: 0.6,
+    textTransform: "uppercase",
+    fontWeight: fontWeight.regular,
+    color: themeVars.textColor,
+  },
+  heading8: {
+    fontFamily,
+    fontSize: typeSizes[6],
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.medium,
+    color: themeVars.textColor,
+  },
+  big: {
+    fontFamily,
+    fontSize: typeSizes[3],
+    lineHeight: lineHeight.regular,
+    fontWeight: fontWeight.regular,
+    color: themeVars.textColor,
+  },
+  regular: {
+    fontFamily,
+    fontSize: typeSizes[4],
+    lineHeight: lineHeight.regular,
+    fontWeight: fontWeight.regular,
+    color: themeVars.textColor,
+    textTransform: "none",
+    letterSpacing: "normal",
+  },
+  small: {
+    fontFamily,
+    fontSize: typeSizes[5],
+    lineHeight: lineHeight.regular,
+    fontWeight: fontWeight.regular,
+    color: themeVars.textColor,
+    textTransform: "none",
+  },
+  code: {
+    fontFamily: '"SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace',
+    fontSize: typeSizes[4],
+    lineHeight: lineHeight.regular,
+    fontWeight: fontWeight.regular,
+    color: themeVars.textColor,
+  },
+  link: {
+    color: themeVars.linkColor,
+    borderBottom: themeVars.linkBorder,
+    textDecoration: "none",
+    cursor: "pointer",
+    transition: `border ${transition}`,
+  },
+  note: {
+    fontFamily,
+    fontSize: typeSizes[3],
+    lineHeight: lineHeight.regular,
+    fontWeight: fontWeight.regular,
+    color: themeVars.textColor,
+    borderRadius: border.radius6,
+  },
+  important: {
+    fontFamily,
+    fontSize: typeSizes[3],
+    lineHeight: lineHeight.regular,
+    fontWeight: fontWeight.regular,
+    color: themeVars.textColor,
+    border: `1px solid ${themeVars.active}`,
+    borderRadius: border.radius6,
+  },
+  numeric: {
+    tabularOn: {
+      fontVariantNumeric: "tabular-nums",
+      fontFeatureSettings: '"tnum" 1',
+    },
+    tabularOff: {
+      fontVariantNumeric: "normal",
+      fontFeatureSettings: '"tnum" 0',
+    },
+  },
+  inherit: {
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    lineHeight: "inherit",
+    fontWeight: "inherit",
+    color: "inherit",
+  },
+} as const;