@fibery/ui-kit 4.1.0 → 4.3.0

package/src/thematic.tsx

@@ -1,10 +1,9 @@
-// oxlint-disable max-lines
 import {css} from "@linaria/core";
 import {useState} from "react";
 import {createPortal} from "react-dom";
 
 import {IconButton} from "./button/icon-button";
-import {backgrounds, sections, stickers} from "./canvas-colors";
+import {backgrounds, type CanvasColorRole, darkFromLight, sections, stickers} from "./canvas-colors";
 import {inspectColor} from "./color-inspect";
 import {border, type ColorScale, space, themeVars} from "./design-system";
 import {cardTypeColors} from "./design-system/colors";
@@ -17,7 +16,7 @@ import Lab from "./icons/react/lab";
 import Pin from "./icons/react/pin";
 import PinFilled from "./icons/react/pin-filled";
 import Refresh from "./icons/react/refresh";
-import Restore from "./icons/react/restore";
+import Undo from "./icons/react/undo";
 import {selectPalette} from "./palette-generator";
 import type {InspectChannel} from "./thematic-color-picker";
 import {themeIcons} from "./thematic-constants";
@@ -154,17 +153,18 @@ export function Thematic() {
     const dn = state.palette.deneutralize ? theme.fns.deneutralize : (c: string) => c;
     const isDark = state.showDark;
     const canvasCol = (
-      defs: readonly (readonly [string, string])[],
+      defs: readonly string[],
       label: string,
+      role: CanvasColorRole,
       padBefore?: Record<number, number>
     ) => {
       const scale: (string | null)[] = [];
-      defs.forEach(([light, dark], i) => {
+      defs.forEach((light, i) => {
         const pad = padBefore?.[i] ?? 0;
         for (let p = 0; p < pad; p++) {
           scale.push(SPACER);
         }
-        scale.push(dn(isDark ? dark : light));
+        scale.push(dn(isDark ? darkFromLight(light, role) : light));
       });
       return {
         name: label,
@@ -230,9 +230,9 @@ export function Thematic() {
         altColors: state.isAltPressed ? [...cardTypeColors] : undefined,
         mini: true,
       },
-      canvasCol(backgrounds, "background"),
-      canvasCol(stickers, "sticker", {0: 1, 8: 2}),
-      canvasCol(sections, "section"),
+      canvasCol(backgrounds, "background", "bg"),
+      canvasCol(stickers, "sticker", "sticker", {0: 1, 8: 2}),
+      canvasCol(sections, "section", "section"),
     ];
   };
   const panel = (
@@ -497,7 +497,7 @@ export function Thematic() {
                       onMouseEnter={() => state.setPreviewPalette(null)}
                       title="Defaults"
                     >
-                      <Restore />
+                      <Undo />
                     </IconButton>
                   ) : null}
                   {(() => {

package/src/theme-provider.test.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable max-lines, no-console */
+/* eslint-disable no-console */
 import {render, screen} from "@testing-library/react";
 
 import {stylesFromTheme, themeFromPalette, themeVars} from "./design-system";
@@ -11,7 +11,7 @@ import {
   useThemeStyles,
 } from "./theme-provider";
 import {locateThemeBundle} from "./theme-styles";
-import {neutralStyles, prefix as themePrefix} from "./theming.generated";
+import {neutralStyles} from "./theming.generated";
 
 const {
   palette,
@@ -79,8 +79,8 @@ describe("ThemeProvider", () => {
       const darkTheme = themeFromPalette(palette, "dark");
 
       // Compare full inline themes to verify they differ
-      const lightStyles = stylesFromTheme(lightTheme, themePrefix);
-      const darkStyles = stylesFromTheme(darkTheme, themePrefix);
+      const lightStyles = stylesFromTheme(lightTheme);
+      const darkStyles = stylesFromTheme(darkTheme);
 
       // Count how many properties differ between light and dark
       let diffCount = 0;
@@ -117,8 +117,8 @@ describe("ThemeProvider", () => {
       const theme3 = themeFromPalette(palette, "light"); // back to light
 
       // Verify themes differ
-      const styles1 = stylesFromTheme(theme1, themePrefix);
-      const styles2 = stylesFromTheme(theme2, themePrefix);
+      const styles1 = stylesFromTheme(theme1);
+      const styles2 = stylesFromTheme(theme2);
 
       let diffCount = 0;
       for (const key in styles2) {
@@ -199,8 +199,8 @@ describe("ThemeProvider", () => {
       const lightTheme = themeFromPalette(palette, "light");
       const darkTheme = themeFromPalette(palette, "dark");
 
-      const lightStyles = stylesFromTheme(lightTheme, themePrefix);
-      const darkStyles = stylesFromTheme(darkTheme, themePrefix);
+      const lightStyles = stylesFromTheme(lightTheme);
+      const darkStyles = stylesFromTheme(darkTheme);
 
       let diffCount = 0;
       for (const key in darkStyles) {
@@ -359,8 +359,8 @@ describe("ThemeProvider", () => {
       const lightTheme = themeFromPalette(palette, "light");
       const darkTheme = themeFromPalette(palette, "dark");
 
-      const lightStyles = stylesFromTheme(lightTheme, themePrefix);
-      const darkStyles = stylesFromTheme(darkTheme, themePrefix);
+      const lightStyles = stylesFromTheme(lightTheme);
+      const darkStyles = stylesFromTheme(darkTheme);
 
       // Calculate light→dark diff
       const lightToDarkDiff: Record<string, string> = {};
@@ -386,11 +386,11 @@ describe("ThemeProvider", () => {
       const lightTheme = themeFromPalette(palette, "light");
       const darkTheme = themeFromPalette(palette, "dark");
 
-      const fullStyles = stylesFromTheme(darkTheme, themePrefix);
+      const fullStyles = stylesFromTheme(darkTheme);
       const fullCount = Object.keys(fullStyles).length;
 
       // Calculate diff
-      const lightStyles = stylesFromTheme(lightTheme, themePrefix);
+      const lightStyles = stylesFromTheme(lightTheme);
       let diffCount = 0;
       for (const key in fullStyles) {
         if (fullStyles[key] !== lightStyles[key]) {
@@ -646,8 +646,8 @@ describe("ThemeProvider", () => {
       const lightTheme = themeFromPalette(palette, "light");
       const darkTheme = themeFromPalette(palette, "dark");
 
-      const lightStyles = stylesFromTheme(lightTheme, themePrefix);
-      const darkStyles = stylesFromTheme(darkTheme, themePrefix);
+      const lightStyles = stylesFromTheme(lightTheme);
+      const darkStyles = stylesFromTheme(darkTheme);
       let expectedDiffCount = 0;
       for (const key in darkStyles) {
         if (darkStyles[key] !== lightStyles[key]) {
@@ -690,8 +690,8 @@ describe("ThemeProvider", () => {
       const lightTheme = themeFromPalette(palette, "light");
       const darkTheme = themeFromPalette(palette, "dark");
 
-      const lightStyles = stylesFromTheme(lightTheme, themePrefix);
-      const darkStyles = stylesFromTheme(darkTheme, themePrefix);
+      const lightStyles = stylesFromTheme(lightTheme);
+      const darkStyles = stylesFromTheme(darkTheme);
       let expectedDiffCount = 0;
       for (const key in darkStyles) {
         if (darkStyles[key] !== lightStyles[key]) {
@@ -744,8 +744,8 @@ describe("ThemeProvider", () => {
       const lightTheme = themeFromPalette(palette, "light");
       const darkTheme = themeFromPalette(palette, "dark");
 
-      const lightStyles = stylesFromTheme(lightTheme, themePrefix);
-      const darkStyles = stylesFromTheme(darkTheme, themePrefix);
+      const lightStyles = stylesFromTheme(lightTheme);
+      const darkStyles = stylesFromTheme(darkTheme);
       let expectedDiffCount = 0;
       for (const key in darkStyles) {
         if (darkStyles[key] !== lightStyles[key]) {
@@ -776,7 +776,7 @@ describe("ThemeProvider", () => {
 
       function StylesCheck() {
         const styles = useThemeStyles();
-        const expected = stylesFromTheme(darkTheme, themePrefix);
+        const expected = stylesFromTheme(darkTheme);
         const match = Object.keys(expected).every((k) => styles[k] === expected[k]);
         return <div data-testid="styles-match" data-match={String(match)} />;
       }

package/src/theme-provider.tsx

@@ -12,7 +12,7 @@ import {selectPalette} from "./palette-generator";
 import type {ThemeMode, ThemePreference} from "./theme-settings";
 import {subscribeOnThemeModeChange, subscribeOnThemePreferenceChange, useWarmPreference} from "./theme-settings";
 import {locateThemeBundle} from "./theme-styles";
-import {neutralStyles, prefix as themePrefix, warmStyles} from "./theming.generated";
+import {neutralStyles, warmStyles} from "./theming.generated";
 
 const darkClassName = "dark-theme";
 const warmClassName = "warm-palette";
@@ -122,7 +122,7 @@ export function ThemeProvider({
   const theme = themeOverride ?? (portal ? parentTheme : themeFromPalette(palette, mode));
 
   const parentStyles = useContext(portal ? RootThemeStylesContext : ThemeStylesContext);
-  const styles = stylesFromTheme(theme, themePrefix);
+  const styles = stylesFromTheme(theme);
   const stylesDiff = useMemo(() => {
     if (styles === parentStyles) {
       return undefined;
@@ -206,11 +206,7 @@ export function RootThemeProvider({
   } = locateThemeBundle(warm);
   const styleBundle = warm ? warmStyles : neutralStyles;
   const cssThemeColors = dark ? darkThemeColors : lightThemeColors;
-  let cssThemeStyles: Styles = dark ? styleBundle.dark : styleBundle.light;
-  if (process.env.NODE_ENV === "development") {
-    // In dev build, we use empty styles as a reference to force all vars inline in top themeproviders — avoids stale Linaria/babel cache.
-    cssThemeStyles = {};
-  }
+  const cssThemeStyles: Styles = dark ? styleBundle.dark : styleBundle.light;
   res = <ThemeStylesContext.Provider value={cssThemeStyles}>{res}</ThemeStylesContext.Provider>;
   res = <RootThemeStylesContext.Provider value={cssThemeStyles}>{res}</RootThemeStylesContext.Provider>;
   res = <ThemeContext.Provider value={cssThemeColors}>{res}</ThemeContext.Provider>;

package/src/theme-settings-core.ts

@@ -0,0 +1,118 @@
+import {getMediaQueryList, subscribeOnChange as subscribeOnMediaQueryChange} from "./media-query-utils";
+import {createPreferenceSetting} from "./preference-setting";
+
+const listenersThemeMode = new Map();
+const listenersThemePreference = new Map();
+
+const themePreferenceKey = "theme-preference";
+
+export type ThemePreference = "dark" | "light" | "auto";
+
+export const themeModes = ["dark", "light"] as const;
+export type ThemeMode = "dark" | "light";
+
+export function getThemePreference(): ThemePreference {
+  const allowedValues = ["dark", "light", "auto"];
+  try {
+    const urlParams = new URLSearchParams(window.location.search);
+    const itemInUrl = urlParams.get("force-theme");
+    if (itemInUrl && allowedValues.includes(itemInUrl)) {
+      return itemInUrl as ThemePreference;
+    }
+    const itemInStorage = localStorage.getItem(themePreferenceKey);
+    if (itemInStorage && allowedValues.includes(itemInStorage)) {
+      return itemInStorage as ThemePreference;
+    }
+  } catch (e) {
+    // Just return the default below
+  }
+  return "light";
+}
+
+const darkModeQuery = "(prefers-color-scheme: dark)";
+
+function getDarkMediaQuery() {
+  return getMediaQueryList(darkModeQuery);
+}
+
+export function getThemeMode(): ThemeMode {
+  const item = getThemePreference();
+  if (item === "auto") {
+    if (getDarkMediaQuery().matches) {
+      return "dark";
+    }
+    return "light";
+  } else if (item === "dark") {
+    return "dark";
+  }
+  return "light";
+}
+
+export function setThemePreference(preference: ThemePreference) {
+  try {
+    if (getThemePreference() !== preference) {
+      localStorage.setItem(themePreferenceKey, preference);
+      listenersThemeMode.forEach((cb) => {
+        cb(getThemeMode());
+      });
+      listenersThemePreference.forEach((cb) => {
+        cb(preference);
+      });
+    }
+  } catch (e) {
+    // skip error
+  }
+}
+
+export function subscribeOnThemePreferenceChange(cb: (themePreference: ThemePreference) => void): () => void {
+  listenersThemePreference.set(cb, cb);
+  let currentPref = getThemePreference();
+  const storageListener = () => {
+    const newPref = getThemePreference();
+    if (currentPref !== newPref) {
+      currentPref = newPref;
+      cb(newPref);
+    }
+  };
+  window.addEventListener("storage", storageListener);
+  return () => {
+    listenersThemePreference.delete(cb);
+    window.removeEventListener("storage", storageListener);
+  };
+}
+
+export function subscribeOnThemeModeChange(cb: (themeMode: ThemeMode) => void): () => void {
+  listenersThemeMode.set(cb, cb);
+  let currentPref = getThemePreference();
+  const darkMediaQuery = getDarkMediaQuery();
+  const storageListener = () => {
+    const newPref = getThemePreference();
+    if (currentPref !== newPref) {
+      currentPref = newPref;
+      cb(getThemeMode());
+    }
+  };
+  window.addEventListener("storage", storageListener);
+  const unsubscribe = subscribeOnMediaQueryChange(darkMediaQuery, () => {
+    if (getThemePreference() === "auto") {
+      cb(getThemeMode());
+    }
+  });
+  return () => {
+    listenersThemeMode.delete(cb);
+    unsubscribe();
+    window.removeEventListener("storage", storageListener);
+  };
+}
+
+export const {
+  has: hasWarmPreference,
+  load: loadWarmPreference,
+  store: storeWarmPreference,
+  subscribe: subscribeOnWarmPreferenceChange,
+} = createPreferenceSetting({
+  key: "warm",
+  parse: (raw) => (raw === "true" ? true : raw === "false" ? false : undefined),
+  stringify: (v: boolean) => JSON.stringify(v),
+  defaultValue: false,
+});

package/src/theme-settings.ts

@@ -1,123 +1,8 @@
 import {useEffect, useState} from "react";
 
-import {getMediaQueryList, subscribeOnChange as subscribeOnMediaQueryChange} from "./media-query-utils";
-import {createPreferenceSetting} from "./preference-setting";
+import {loadWarmPreference, storeWarmPreference, subscribeOnWarmPreferenceChange} from "./theme-settings-core";
 
-const listenersThemeMode = new Map();
-const listenersThemePreference = new Map();
-
-const themePreferenceKey = "theme-preference";
-
-export type ThemePreference = "dark" | "light" | "auto";
-
-export const themeModes = ["dark", "light"] as const;
-export type ThemeMode = "dark" | "light";
-
-export function getThemePreference(): ThemePreference {
-  const allowedValues = ["dark", "light", "auto"];
-  try {
-    const urlParams = new URLSearchParams(window.location.search);
-    const itemInUrl = urlParams.get("force-theme");
-    if (itemInUrl && allowedValues.includes(itemInUrl)) {
-      return itemInUrl as ThemePreference;
-    }
-    const itemInStorage = localStorage.getItem(themePreferenceKey);
-    if (itemInStorage && allowedValues.includes(itemInStorage)) {
-      return itemInStorage as ThemePreference;
-    }
-  } catch (e) {
-    // Just return the default below
-  }
-  return "light";
-}
-
-const darkModeQuery = "(prefers-color-scheme: dark)";
-
-function getDarkMediaQuery() {
-  return getMediaQueryList(darkModeQuery);
-}
-
-export function getThemeMode(): ThemeMode {
-  const item = getThemePreference();
-  if (item === "auto") {
-    if (getDarkMediaQuery().matches) {
-      return "dark";
-    }
-    return "light";
-  } else if (item === "dark") {
-    return "dark";
-  }
-  return "light";
-}
-
-export function setThemePreference(preference: ThemePreference) {
-  try {
-    if (getThemePreference() !== preference) {
-      localStorage.setItem(themePreferenceKey, preference);
-      listenersThemeMode.forEach((cb) => {
-        cb(getThemeMode());
-      });
-      listenersThemePreference.forEach((cb) => {
-        cb(preference);
-      });
-    }
-  } catch (e) {
-    // skip error
-  }
-}
-
-export function subscribeOnThemePreferenceChange(cb: (themePreference: ThemePreference) => void): () => void {
-  listenersThemePreference.set(cb, cb);
-  let currentPref = getThemePreference();
-  const storageListener = () => {
-    const newPref = getThemePreference();
-    if (currentPref !== newPref) {
-      currentPref = newPref;
-      cb(newPref);
-    }
-  };
-  window.addEventListener("storage", storageListener);
-  return () => {
-    listenersThemePreference.delete(cb);
-    window.removeEventListener("storage", storageListener);
-  };
-}
-
-export function subscribeOnThemeModeChange(cb: (themeMode: ThemeMode) => void): () => void {
-  listenersThemeMode.set(cb, cb);
-  let currentPref = getThemePreference();
-  const darkMediaQuery = getDarkMediaQuery();
-  const storageListener = () => {
-    const newPref = getThemePreference();
-    if (currentPref !== newPref) {
-      currentPref = newPref;
-      cb(getThemeMode());
-    }
-  };
-  window.addEventListener("storage", storageListener);
-  const unsubscribe = subscribeOnMediaQueryChange(darkMediaQuery, () => {
-    if (getThemePreference() === "auto") {
-      cb(getThemeMode());
-    }
-  });
-  return () => {
-    listenersThemeMode.delete(cb);
-    unsubscribe();
-    window.removeEventListener("storage", storageListener);
-  };
-}
-
-export const {
-  has: hasWarmPreference,
-  load: loadWarmPreference,
-  store: storeWarmPreference,
-  subscribe: subscribeOnWarmPreferenceChange,
-} = createPreferenceSetting({
-  key: "warm",
-  parse: (raw) => (raw === "true" ? true : raw === "false" ? false : undefined),
-  stringify: (v: boolean) => JSON.stringify(v),
-  defaultValue: false,
-});
+export * from "./theme-settings-core";
 
 export function useWarmPreference() {
   const [warm, setWarm] = useState(loadWarmPreference);

package/src/theme-snapshots.test.ts

@@ -3,14 +3,13 @@ import {format, type FormatConfig} from "oxfmt";
 import oxfmtConfig from "../../../.oxfmtrc.json" with {type: "json"};
 import {buildThemingSnapshot} from "./theming.build";
 
-async function renderTs(prefix: string): Promise<string> {
-  const s = buildThemingSnapshot(prefix);
+async function renderTs(ns: string): Promise<string> {
+  const s = buildThemingSnapshot(ns);
   const lines = [
     "// oxlint-disable max-lines",
-    `// Auto-generated by theme-snapshots.test.ts for prefix "${prefix}". Run with vitest \`-u\` to refresh.`,
+    `// Auto-generated by theme-snapshots.test.ts for namespace "${ns}". Run with vitest \`-u\` to refresh.`,
     `// Do not import this file directly — go through './theming' (index.ts).`,
     "",
-    `export const prefix = ${JSON.stringify(prefix)} as const;`,
     `export const themeVars = ${JSON.stringify(s.themeVars, null, 2)} as const;`,
     `export const menuItemHeightVar = ${JSON.stringify(s.menuItemHeightVar)} as const;`,
     `export const sidebarMenuItemHeightVar = ${JSON.stringify(s.sidebarMenuItemHeightVar)} as const;`,
@@ -21,7 +20,7 @@ async function renderTs(prefix: string): Promise<string> {
     `export const warmStyles = ${JSON.stringify(s.warmStyles, null, 2)} as const;`,
     "",
   ];
-  const {code} = await format(`./theming/theming-${prefix}.snapshot.ts`, lines.join("\n"), oxfmtConfig as FormatConfig);
+  const {code} = await format(`./theming/theming-${ns}.snapshot.ts`, lines.join("\n"), oxfmtConfig as FormatConfig);
   return code;
 }
 
@@ -35,8 +34,8 @@ function renderCssBlock(selector: string, vars: Record<string, string>): string
 async function renderCss(prefix: string): Promise<string> {
   const s = buildThemingSnapshot(prefix);
   const raw = [
-    `/* Auto-generated by theme-snapshots.test.ts for prefix "${prefix}". */`,
-    `/* IDE DX only: lets editors resolve var(--${prefix}-color-*) by name. Not imported at runtime. */`,
+    `/* Auto-generated by theme-snapshots.test.ts for namespace "${prefix}". */`,
+    `/* IDE DX only: lets editors resolve vars by name. Not imported at runtime. */`,
     renderCssBlock(":root", s.neutralStyles.light),
     renderCssBlock(":root.dark-theme", s.neutralStyles.dark),
     renderCssBlock(":root.warm-palette", s.warmStyles.light),

package/src/theming.build.ts

@@ -1,9 +1,14 @@
 // Builder for prefix-baked theming snapshots. Internal to ui-kit.
 
-import type {Theme} from "./design-system/theme";
 import {stylesFromTheme} from "./design-system/theme";
-import type {LayoutVarNames, LayoutVars, ThemeVars} from "./design-system/vars";
-import {layoutVarNamesFromPrefix, layoutVarsFromPrefix, varsFromTheme} from "./design-system/vars";
+import {
+  type LayoutVarNames,
+  layoutVarNamesFromPrefix,
+  type LayoutVars,
+  layoutVarsFromPrefix,
+  type ThemeVars,
+  varsFromTheme,
+} from "./design-system/vars";
 import {locateThemeBundle} from "./theme-styles";
 
 export type ThemingSnapshot = LayoutVarNames & {
@@ -14,20 +19,21 @@ export type ThemingSnapshot = LayoutVarNames & {
   warmStyles: {light: Record<string, string>; dark: Record<string, string>};
 };
 
-const stylesPair = (themes: readonly [Theme, Theme], prefix: string) => ({
-  light: stylesFromTheme(themes[0], prefix),
-  dark: stylesFromTheme(themes[1], prefix),
-});
-
-export function buildThemingSnapshot(prefix: string): ThemingSnapshot {
+export function buildThemingSnapshot(ns: string): ThemingSnapshot {
   const neutral = locateThemeBundle(false);
   const warm = locateThemeBundle(true);
   return {
-    prefix,
-    themeVars: varsFromTheme(neutral.themes[0], prefix),
-    ...layoutVarNamesFromPrefix(prefix),
-    layoutVars: layoutVarsFromPrefix(prefix),
-    neutralStyles: stylesPair(neutral.themes, prefix),
-    warmStyles: stylesPair(warm.themes, prefix),
+    prefix: ns,
+    themeVars: varsFromTheme(neutral.themes[0]),
+    ...layoutVarNamesFromPrefix(ns),
+    layoutVars: layoutVarsFromPrefix(ns),
+    neutralStyles: {
+      light: stylesFromTheme(neutral.themes[0]),
+      dark: stylesFromTheme(neutral.themes[1]),
+    },
+    warmStyles: {
+      light: stylesFromTheme(warm.themes[0]),
+      dark: stylesFromTheme(warm.themes[1]),
+    },
   };
 }