@fibery/ui-kit 2.0.0 → 2.1.0

package/src/design-system/layout.ts

@@ -42,7 +42,7 @@ export const space = {
 export const layout = {
   logoSize: 18,
   menuDefaultWidth: 243,
-  fiberyAiSidebarDefaultWidth: 420,
+  fiberyAiSidebarDefaultWidth: 360,
   fiberyAiSidebarMaxWidth: 920,
   desktopToolbarHeight: 32,
   desktopMenuMinWidth: 240,
@@ -103,4 +103,5 @@ export const border = {
   radius12: 12,
   radius16: 16,
   radius9999: 9999,
+  radiusFull: "50%",
 } as const;

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

@@ -1,93 +1,38 @@
-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";
+import {stylesFromTheme, Theme, themeFromPalette} from "./theme";
+import {themeModes} from "../theme-settings";
+import {selectPalette} from "../palette-generator";
 
-describe("select", () => {
-  function makeSelect(mode: ThemeMode) {
-    return makeThemeApi({key: "smth"} as ThemePalette, {fns: {}} as ThemeDefs, mode).select;
+test("makeTheme memoization", () => {
+  function getKeys(colors: Theme["colors"]) {
+    return Object.keys(colors).sort();
   }
 
-  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));
+  const themes = themeModes.map((mode) => themeFromPalette(selectPalette(), mode));
 
   // same input → same reference
   themeModes.forEach((mode, i) => {
-    expect(getThemeColors(null, mode)).toBe(themes[i]);
+    expect(themeFromPalette(selectPalette(), 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});
+  expect(new Set(themes.map((theme) => getKeys(theme.colors).join(",")))).toMatchObject({size: 1});
 });
 
-describe("createInlineStyles", () => {
+describe("makeThemeStyles", () => {
   it("maps provided theme to css props", () => {
-    const theme = {
-      key: "key",
+    const colors = {
       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(`
+    } satisfies Partial<Theme["colors"]> as Theme["colors"];
+    expect(stylesFromTheme({key: "key", colors})).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

@@ -1,93 +1,44 @@
-import {Colors, makeThemeDefs, pickColors, pickFns, ThemeDefs} from "./colors";
-import {getTypeColors, TypeColors} from "./colors-js";
+import {defsFromPalette, sideFromDefs, ThemeDefs} from "./colors";
 import {ThemeMode} from "../theme-settings";
-import {defaultPaletteKey, makeDefaultPalette, ThemePalette} from "../palette-generator";
+import {selectPalette, ThemePalette} from "../palette-generator";
 import memoize from "lodash/memoize";
-import {makeThemeVars, varPrefix} from "./vars";
+import {varPrefix, varsFromTheme} from "./vars";
 import {typedObjectEntries} from "@fibery/helpers/utils/object";
+import {makeSelect} from "./colors-js";
 
-export function makeThemeApi(palette: ThemePalette, defs: ThemeDefs, mode: ThemeMode) {
+// intentionally non-memoized implementation detail for theme-styles use-case
+export function themeFromDefs(defs: ThemeDefs, mode: ThemeMode) {
+  const {colors, fns} = sideFromDefs(defs, mode);
   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;
-    },
+    key: `${defs.key}-${mode}`,
+    mode,
+    select: makeSelect(mode),
+    colors,
+    fns,
   };
 }
 
-type ThemeApi = ReturnType<typeof makeThemeApi>;
+export type Theme = ReturnType<typeof themeFromDefs>;
 
-// 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;
-      }, "");
+function themeFromPaletteImpl(palette: ThemePalette, mode: ThemeMode) {
+  const defs = defsFromPalette(palette);
+  return themeFromDefs(defs, mode);
+}
 
-      return inlineTheme;
-    }
-    if (key === "shades") {
-      Object.entries(themes.shades as Record<string, string>).forEach(([shadeKey, shadeValue]) => {
-        inlineTheme[`--${varPrefix}-shades-${shadeKey}`] = shadeValue;
-      }, "");
+export const themeFromPalette = memoize(themeFromPaletteImpl, (palette, mode) => `${palette.key}-${mode}`);
 
-      return inlineTheme;
-    }
-    if (key === "lights") {
-      Object.entries(themes.lights as Record<string, string>).forEach(([lightKey, lightValue]) => {
-        inlineTheme[`--${varPrefix}-lights-${lightKey}`] = lightValue;
-      }, "");
+export const themeVars = varsFromTheme(themeFromPaletteImpl(selectPalette(), "light"));
 
-      return inlineTheme;
-    }
-    if (key === "separators") {
-      Object.entries(themes.separators as Record<string, string>).forEach(([separatorKey, separatorValue]) => {
-        inlineTheme[`--${varPrefix}-separator-${separatorKey}`] = separatorValue;
-      }, "");
+export type Styles = Record<string, string>;
 
-      return inlineTheme;
-    }
+function stylesFromThemeImpl({colors: themes}: Pick<Theme, "colors">): Styles {
+  return typedObjectEntries(themes).reduce<Styles>((inlineTheme, [key, value]) => {
     inlineTheme[`--${varPrefix}-color-${key}`] = value;
     return inlineTheme;
   }, {});
 }
 
-export const createInlineStyles = memoize(
-  (theme: ThemeColors) => createInlineStylesImpl(theme),
+export const stylesFromTheme = memoize(
+  (theme: Pick<Theme, "key" | "colors">) => stylesFromThemeImpl(theme),
   (theme) => theme.key
 );