@fibery/ui-kit 1.40.4 → 1.42.0

package/src/thematic-state.ts

@@ -10,10 +10,10 @@ import {
   type ThematicPrefs,
   type ThemePalette,
 } from "./palette-generator";
-import {defaultPalette} from "./theme-styles";
 import {getThemePreference, setThemePreference, type ThemePreference} from "./theme-settings";
 import {StaticPalettes} from "./static-palettes";
 import {defaultPrefs, HIGHLIGHT_COLOR, nextThemePref} from "./thematic-constants";
+import {useToast} from "./toast/toast-provider";
 
 interface StoredState {
   prefs: ThematicPrefs | null;
@@ -21,8 +21,7 @@ interface StoredState {
   customPalette: Partial<ThemePalette> | null;
 }
 
-export type ThematicExport = {
-  scales: Partial<Omit<ThemePalette, "key">>;
+export type ThematicExport = Partial<Omit<ThemePalette, "key">> & {
   meta?: {
     prefs: ThematicPrefs | null;
   };
@@ -30,10 +29,25 @@ export type ThematicExport = {
 
 const STORAGE_KEY = "thematic-palette";
 
+function isValidPalette(p: Partial<ThemePalette> | null): boolean {
+  if (!p) {
+    return true;
+  }
+  return Array.isArray(p.whiteA) && Array.isArray(p.blackA);
+}
+
 function loadFromStorage(): StoredState | null {
   try {
     const raw = localStorage.getItem(STORAGE_KEY);
-    return raw ? JSON.parse(raw) : null;
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw) as StoredState;
+    if (!isValidPalette(parsed.customPalette)) {
+      localStorage.removeItem(STORAGE_KEY);
+      return null;
+    }
+    return parsed;
   } catch {
     return null;
   }
@@ -50,8 +64,9 @@ function saveToStorage(data: StoredState) {
 const stored = loadFromStorage();
 
 export function useThematicState() {
-  const {setPalette} = useThematic();
+  const {palette: providerPalette, setPalette} = useThematic();
   const themeMode = useThemeMode();
+  const toast = useToast();
 
   const [themePref, setThemePref] = useState<ThemePreference>(getThemePreference);
   const isAuto = themePref === "auto";
@@ -103,7 +118,7 @@ export function useThematicState() {
     baseCurvesLightChanged || baseCurvesDarkChanged || accentCurvesLightChanged || accentCurvesDarkChanged;
 
   const palette = useMemo(() => {
-    const base = staticPalette ? staticPalette.make() : prefs ? makeThematicPalette(prefs) : defaultPalette;
+    const base = staticPalette ? staticPalette.make() : prefs ? makeThematicPalette(prefs) : providerPalette;
     let result = customPalette ? {...base, ...customPalette} : base;
 
     if (baseCurvesLightChanged) {
@@ -166,6 +181,7 @@ export function useThematicState() {
     prefsPresent,
     staticPalette,
     customPalette,
+    providerPalette,
     baseCurvesLight,
     baseCurvesDark,
     accentCurvesLight,
@@ -185,10 +201,14 @@ export function useThematicState() {
         key: `${palette.key}-highlight-${highlight.scale}-${highlight.index}`,
         [highlight.scale]: scale as unknown as ColorScale,
       });
+    } else if (prefs !== null || staticPalette !== null || customPalette !== null || anyCurvesChanged) {
+      if (palette.key !== providerPalette.key) {
+        setPalette(palette);
+      }
     } else {
-      setPalette(palette);
+      setPalette(null);
     }
-  }, [palette, highlight, setPalette]);
+  }, [palette, providerPalette, highlight, prefs, staticPalette, customPalette, anyCurvesChanged, setPalette]);
 
   const update = (partial: Partial<ThematicPrefs>) => {
     setStaticPaletteIndex(null);
@@ -209,7 +229,12 @@ export function useThematicState() {
 
   const cycleStaticPalettes = () => {
     setPrefs(null);
-    setStaticPaletteIndex((prev) => (prev === null ? 0 : (prev + 1) % StaticPalettes.length));
+    setStaticPaletteIndex((prev) => {
+      const next = prev === null ? 0 : (prev + 1) % StaticPalettes.length;
+      const key = StaticPalettes[next].make().key;
+      toast.info({title: key});
+      return next;
+    });
   };
 
   const cycleTheme = () => {
@@ -226,13 +251,17 @@ export function useThematicState() {
     setBaseCurvesDark(DEFAULT_DARK_CURVES);
     setAccentCurvesLight(DEFAULT_LIGHT_CURVES);
     setAccentCurvesDark(DEFAULT_DARK_CURVES);
+    saveToStorage({prefs: null, staticPaletteIndex: null, customPalette: null});
   };
 
   const updateScaleColor = useCallback(
     (scaleName: keyof ThemePalette, index: number, color: string) => {
       setCustomPalette((prev) => {
-        const currentScale = prev?.[scaleName] ?? palette[scaleName];
-        const mutableScale = [...currentScale] as unknown as string[];
+        const currentValue = prev?.[scaleName] ?? palette[scaleName];
+        if (typeof currentValue === "string") {
+          return {...prev, [scaleName]: color};
+        }
+        const mutableScale = [...currentValue] as unknown as string[];
         mutableScale[index] = color;
         return {...prev, [scaleName]: mutableScale as unknown as ColorScale};
       });
@@ -262,28 +291,36 @@ export function useThematicState() {
   const setAccentCurves = editingDark ? setAccentCurvesDark : setAccentCurvesLight;
 
   const exportState = useCallback((): ThematicExport => {
-    const keys: (keyof Omit<ThemePalette, "key">)[] = ["white", "black"];
+    const keys: (keyof Omit<ThemePalette, "key">)[] = ["white", "whiteA", "black", "blackA"];
     if (showLight) {
       keys.push("base", "accent", "red", "teal", "yellow");
     }
     if (showDark) {
       keys.push("baseDark", "accentDark", "redDark", "tealDark", "yellowDark");
     }
-    const scales: Partial<Omit<ThemePalette, "key">> = {};
+    const result: ThematicExport = {};
     for (const k of keys) {
-      scales[k] = palette[k];
+      (result as Record<string, unknown>)[k] = palette[k];
     }
     const bothModes = showLight && showDark;
-    return {scales, ...(bothModes ? {meta: {prefs}} : undefined)};
+    if (bothModes) {
+      result.meta = {prefs};
+    }
+    return result;
   }, [palette, showLight, showDark, prefs]);
 
   const importState = useCallback((data: ThematicExport) => {
-    if (data.meta) {
-      setPrefs(data.meta.prefs);
+    const {meta, ...scales} = data;
+    if (!isValidPalette(scales)) {
+      alert("Outdated palette format");
+      return;
+    }
+    if (meta) {
+      setPrefs(meta.prefs);
       setStaticPaletteIndex(null);
     }
-    const hasLight = "base" in data.scales;
-    const hasDark = "baseDark" in data.scales;
+    const hasLight = "base" in scales;
+    const hasDark = "baseDark" in scales;
     if (hasLight && !hasDark) {
       setThemePreference("light");
       setThemePref("light");
@@ -295,7 +332,7 @@ export function useThematicState() {
       (prev) =>
         ({
           ...prev,
-          ...data.scales,
+          ...scales,
           key: `import-${Date.now()}`,
         } as Partial<ThemePalette>)
     );

package/src/thematic.tsx

@@ -2,9 +2,7 @@ import {css} from "@linaria/core";
 import {createPortal} from "react-dom";
 import {border, space, themeVars} from "./design-system";
 import {ThemeProvider} from "./theme-provider";
-import {OKLCH, produceColor} from "./color-utils";
-import type {ColorScale} from "./palette-generator";
-import type {ThematicExport} from "./thematic-state";
+import {toOKLCH, toRGB} from "./color-utils";
 import {useThematicState} from "./thematic-state";
 import {IconButton} from "./button/icon-button";
 import Refresh from "./icons/react/Refresh";
@@ -17,7 +15,8 @@ import FileDownload from "./icons/react/FileDownload";
 import FileUpload from "./icons/react/FileUpload";
 import {themeIcons} from "./thematic-constants";
 import {ArrayEditor, ArraySlider, controlRowCss, Slider} from "./thematic-controls";
-import {ScalePair, ScaleRow, sectionSeparatorCss} from "./thematic-scales";
+import {scaleCss, ScalePair, ScaleRow, sectionLabelCss, sectionSeparatorCss} from "./thematic-scales";
+import {SwatchWithPicker} from "./thematic-color-picker";
 
 const panelCss = css`
   position: fixed;
@@ -37,18 +36,6 @@ const buttonsCss = css`
   margin-top: ${space.s12}px;
 `;
 
-function toOklchScale(scale: ColorScale): ColorScale {
-  return scale.map((c) => produceColor(c, (x) => x, OKLCH)) as unknown as ColorScale;
-}
-
-function toOklchExport(data: ThematicExport): ThematicExport {
-  const scales = {...data.scales};
-  for (const [k, v] of Object.entries(scales)) {
-    (scales as Record<string, ColorScale>)[k] = toOklchScale(v);
-  }
-  return {...data, scales};
-}
-
 export function Thematic() {
   const {
     palette,
@@ -80,18 +67,17 @@ export function Thematic() {
     importState,
   } = useThematicState();
 
-  const handleExport = (e: React.MouseEvent) => {
+  const handleExport = () => {
     const data = exportState();
-    const output = e.altKey ? toOklchExport(data) : data;
-    const blob = new Blob([JSON.stringify(output, null, 2)], {type: "application/json"});
+    const blob = new Blob([JSON.stringify(data, null, 2)], {type: "application/json"});
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    const hasLight = "base" in data.scales;
-    const hasDark = "baseDark" in data.scales;
+    const hasLight = "base" in data;
+    const hasDark = "baseDark" in data;
     const modes = [hasLight && "light", hasDark && "dark"].filter(Boolean).join("&");
     const now = new Date().toISOString().replaceAll(/\D+/g, "");
-    a.download = `palette-${modes}${e.altKey ? "-oklch" : ""}-${now}.json`;
+    a.download = `palette-${modes}-${now}.json`;
     a.click();
     URL.revokeObjectURL(url);
   };
@@ -273,11 +259,31 @@ export function Thematic() {
 
           <div className={sectionSeparatorCss} />
 
+          <div className={sectionLabelCss}>lights & shades</div>
+          <div className={scaleCss}>
+            <div style={{border: "1px solid #888", borderRadius: 5}}>
+              <SwatchWithPicker
+                color={palette.white}
+                title={`white\n${toRGB(palette.white)}\n${toOKLCH(palette.white)}`}
+                onChange={(c) => updateScaleColor("white", 0, c)}
+                isAltPressed={isAltPressed}
+              />
+            </div>
+            <div style={{border: "1px solid #888", borderRadius: 5}}>
+              <SwatchWithPicker
+                color={palette.black}
+                title={`black\n${toRGB(palette.black)}\n${toOKLCH(palette.black)}`}
+                onChange={(c) => updateScaleColor("black", 0, c)}
+                isAltPressed={isAltPressed}
+              />
+            </div>
+          </div>
+
           <ScaleRow
-            name="white"
-            scale={palette.white}
-            onColorChange={(i, c) => updateScaleColor("white", i, c)}
-            onHighlight={highlightScale("white")}
+            name="whiteA"
+            scale={palette.whiteA}
+            onColorChange={(i, c) => updateScaleColor("whiteA", i, c)}
+            onHighlight={highlightScale("whiteA")}
             onHighlightEnd={clearHighlight}
             isAltPressed={isAltPressed}
           />
@@ -298,13 +304,11 @@ export function Thematic() {
             onChange={(v) => update({whiteChroma: v})}
           />
 
-          <div className={sectionSeparatorCss} />
-
           <ScaleRow
-            name="black"
-            scale={palette.black}
-            onColorChange={(i, c) => updateScaleColor("black", i, c)}
-            onHighlight={highlightScale("black")}
+            name="blackA"
+            scale={palette.blackA}
+            onColorChange={(i, c) => updateScaleColor("blackA", i, c)}
+            onHighlight={highlightScale("blackA")}
             onHighlightEnd={clearHighlight}
             isAltPressed={isAltPressed}
           />

package/src/theme-provider.test.tsx

@@ -11,12 +11,9 @@ import {
   useThemeStyles,
 } from "./theme-provider";
 import {defaultDarkTheme, defaultLightTheme, defaultLightThemeStyles} from "./theme-styles";
-import {createInlineTheme, getThemeColors} from "./design-system";
+import {createInlineStyles, getThemeColors, themeVars} from "./design-system";
 import {makeDefaultPalette} from "./palette-generator";
 
-// Use real createInlineTheme, not the mock
-jest.unmock("./create-inline-theme");
-
 const palette = makeDefaultPalette();
 
 function ThemeDisplay({testId = "theme-display"}: {testId?: string}) {
@@ -79,8 +76,8 @@ describe("ThemeProvider", () => {
       const darkTheme = getThemeColors(null, "dark", palette);
 
       // Compare full inline themes to verify they differ
-      const lightStyles = createInlineTheme(lightTheme, []);
-      const darkStyles = createInlineTheme(darkTheme, []);
+      const lightStyles = createInlineStyles(lightTheme);
+      const darkStyles = createInlineStyles(darkTheme);
 
       // Count how many properties differ between light and dark
       let diffCount = 0;
@@ -117,8 +114,8 @@ describe("ThemeProvider", () => {
       const theme3 = getThemeColors(null, "light", palette); // back to light
 
       // Verify themes differ
-      const styles1 = createInlineTheme(theme1, []);
-      const styles2 = createInlineTheme(theme2, []);
+      const styles1 = createInlineStyles(theme1);
+      const styles2 = createInlineStyles(theme2);
 
       let diffCount = 0;
       for (const key in styles2) {
@@ -199,8 +196,8 @@ describe("ThemeProvider", () => {
       const lightTheme = getThemeColors(null, "light", palette);
       const darkTheme = getThemeColors(null, "dark", palette);
 
-      const lightStyles = createInlineTheme(lightTheme, []);
-      const darkStyles = createInlineTheme(darkTheme, []);
+      const lightStyles = createInlineStyles(lightTheme);
+      const darkStyles = createInlineStyles(darkTheme);
 
       let diffCount = 0;
       for (const key in darkStyles) {
@@ -309,6 +306,21 @@ describe("ThemeProvider", () => {
       // Theme should be generated with the custom color
       expect(screen.getByTestId("theme-display")).toBeInTheDocument();
     });
+
+    it("color={var(--...)} is a no-op (same theme as parent)", () => {
+      const {container} = render(
+        <ThemeProvider mode="light">
+          <ThemeProvider color={themeVars.accentTextColor}>
+            <ThemeDisplay />
+          </ThemeProvider>
+        </ThemeProvider>
+      );
+
+      const divs = Array.from(container.querySelectorAll("div")).filter((d) => !d.hasAttribute("data-testid"));
+      const innerDiv = divs[divs.length - 1];
+      const style = innerDiv?.getAttribute("style") || "";
+      expect(style).toBe("");
+    });
   });
 
   describe("style optimization verification", () => {
@@ -344,8 +356,8 @@ describe("ThemeProvider", () => {
       const lightTheme = getThemeColors(null, "light", palette);
       const darkTheme = getThemeColors(null, "dark", palette);
 
-      const lightStyles = createInlineTheme(lightTheme, []);
-      const darkStyles = createInlineTheme(darkTheme, []);
+      const lightStyles = createInlineStyles(lightTheme);
+      const darkStyles = createInlineStyles(darkTheme);
 
       // Calculate light→dark diff
       const lightToDarkDiff: Record<string, string> = {};
@@ -371,11 +383,11 @@ describe("ThemeProvider", () => {
       const lightTheme = getThemeColors(null, "light", palette);
       const darkTheme = getThemeColors(null, "dark", palette);
 
-      const fullStyles = createInlineTheme(darkTheme, []);
+      const fullStyles = createInlineStyles(darkTheme);
       const fullCount = Object.keys(fullStyles).length;
 
       // Calculate diff
-      const lightStyles = createInlineTheme(lightTheme, []);
+      const lightStyles = createInlineStyles(lightTheme);
       let diffCount = 0;
       for (const key in fullStyles) {
         if (fullStyles[key] !== lightStyles[key]) {
@@ -666,8 +678,8 @@ describe("ThemeProvider", () => {
       const lightTheme = getThemeColors(null, "light", palette);
       const darkTheme = getThemeColors(null, "dark", palette);
 
-      const lightStyles = createInlineTheme(lightTheme, []);
-      const darkStyles = createInlineTheme(darkTheme, []);
+      const lightStyles = createInlineStyles(lightTheme);
+      const darkStyles = createInlineStyles(darkTheme);
       let expectedDiffCount = 0;
       for (const key in darkStyles) {
         if (darkStyles[key] !== lightStyles[key]) {
@@ -710,8 +722,8 @@ describe("ThemeProvider", () => {
       const lightTheme = getThemeColors(null, "light", palette);
       const darkTheme = getThemeColors(null, "dark", palette);
 
-      const lightStyles = createInlineTheme(lightTheme, []);
-      const darkStyles = createInlineTheme(darkTheme, []);
+      const lightStyles = createInlineStyles(lightTheme);
+      const darkStyles = createInlineStyles(darkTheme);
       let expectedDiffCount = 0;
       for (const key in darkStyles) {
         if (darkStyles[key] !== lightStyles[key]) {
@@ -765,7 +777,7 @@ describe("ThemeProvider", () => {
 
       function StylesCheck() {
         const styles = useThemeStyles();
-        const expected = createInlineTheme(darkTheme, []);
+        const expected = createInlineStyles(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

@@ -1,15 +1,15 @@
 import invariant from "invariant";
 import {
-  defaultDarkTheme,
-  defaultDarkThemeStyles,
+  chooseGlobalStyles,
   defaultLightTheme,
   defaultLightThemeStyles,
   defaultPalette,
-  themeStyles,
+  selectGlobalTheme,
 } from "./theme-styles";
 import {layoutStyles} from "./layout-styles";
 import {
   createContext,
+  forwardRef,
   PropsWithChildren,
   ReactNode,
   useContext,
@@ -18,8 +18,8 @@ import {
   useMemo,
   useState,
 } from "react";
-import {createInlineTheme, getThemeColors, rejectNoKeys, ThemeColors} from "./design-system";
-import {ThemePalette} from "./palette-generator";
+import {createInlineStyles, getThemeColors, ThemeColors, ThemeStyles} from "./design-system";
+import {selectPalette, ThemePalette} from "./palette-generator";
 import {
   subscribeOnThemeMenuPreferenceChange,
   subscribeOnThemeModeChange,
@@ -27,9 +27,9 @@ import {
   ThemeMenuPreference,
   ThemeMode,
   ThemePreference,
+  useWarmPreference,
 } from "./theme-settings";
 import {css} from "@linaria/core";
-import {ThemeStyles} from "./create-inline-theme";
 
 const ThemePreferenceContext = createContext<ThemePreference | null>(null);
 
@@ -67,9 +67,13 @@ export function useThemeStyles(): ThemeStyles {
 
 const ThemePaletteContext = createContext<ThemePalette>(defaultPalette);
 
+export function useThemePalette(): ThemePalette {
+  return useContext(ThemePaletteContext);
+}
+
 type ThematicContextValue = {
   palette: ThemePalette;
-  setPalette: (palette: ThemePalette) => void;
+  setPalette: (palette: ThemePalette | null) => void;
 };
 
 const ThematicContext = createContext<ThematicContextValue>({
@@ -101,7 +105,7 @@ export function ThemeProvider({
   const theme = themeOverride ?? getThemeColors(color, mode, palette);
 
   const parentStyles = useContext(portal ? RootThemeStylesContext : ThemeStylesContext);
-  const styles = createInlineTheme(theme, rejectNoKeys);
+  const styles = createInlineStyles(theme);
   const stylesDiff = useMemo(() => {
     if (styles === parentStyles) {
       return undefined;
@@ -131,6 +135,20 @@ export function ThemeProvider({
   );
 }
 
+/**
+ * Wrapper for ThemeProvider that absorbs Radix Portal's `asChild` ref/props.
+ * Use as direct child of Radix Portal components (MenuPortal, TooltipPortal, etc.)
+ */
+export const RadixPortalThemeProvider = forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
+  function PortalThemeProvider({children, ...rest}, ref) {
+    return (
+      <div ref={ref} {...rest}>
+        <ThemeProvider portal>{children}</ThemeProvider>
+      </div>
+    );
+  }
+);
+
 export function MenuThemeProvider({children}: {children: ReactNode}) {
   const themeMode = useThemeMode();
   // light2 = always dark menu
@@ -142,31 +160,41 @@ export function RootThemeProvider({
   initialThemeMode,
   initialPreference,
   initialMenuPreference,
+  isArchitect = false,
   children,
 }: {
   initialThemeMode: ThemeMode;
   initialPreference: ThemePreference;
   initialMenuPreference: ThemeMenuPreference;
+  isArchitect?: boolean;
   children: ReactNode;
 }): JSX.Element {
   const [themeMode, setThemeMode] = useState<ThemeMode>(initialThemeMode);
   useEffect(() => subscribeOnThemeModeChange(setThemeMode), []);
 
-  const [palette, setPalette] = useState<ThemePalette>(defaultPalette);
+  const [warm] = useWarmPreference();
+  useEffect(() => chooseGlobalStyles(themeMode, warm), [themeMode, warm]);
+
+  const [paletteOverride, setPaletteOverride] = useState<ThemePalette | null>(null);
+
+  const palette = useMemo(() => {
+    return paletteOverride ?? selectPalette({warmLook: warm, isArchitect});
+  }, [paletteOverride, warm, isArchitect]);
 
   let res = <ThemeProvider theme={getThemeColors(null, themeMode, palette)}>{children}</ThemeProvider>;
 
   // Set base context to what global CSS has, so ThemeProvider diffs against it
-  const cssThemeStyles = themeMode === "dark" ? defaultDarkThemeStyles : defaultLightThemeStyles;
+  const [cssThemeColors, cssThemeStyles] = selectGlobalTheme(warm, themeMode === "dark");
   res = <ThemeStylesContext.Provider value={cssThemeStyles}>{res}</ThemeStylesContext.Provider>;
   res = <RootThemeStylesContext.Provider value={cssThemeStyles}>{res}</RootThemeStylesContext.Provider>;
-
-  const cssThemeColors = themeMode === "dark" ? defaultDarkTheme : defaultLightTheme;
   res = <ThemeColorsContext.Provider value={cssThemeColors}>{res}</ThemeColorsContext.Provider>;
 
   res = <ThemePaletteContext.Provider value={palette}>{res}</ThemePaletteContext.Provider>;
 
-  const thematicContextValue = useMemo<ThematicContextValue>(() => ({palette, setPalette}), [palette]);
+  const thematicContextValue = useMemo<ThematicContextValue>(
+    () => ({palette, setPalette: setPaletteOverride}),
+    [palette, setPaletteOverride]
+  );
   res = <ThematicContext.Provider value={thematicContextValue}>{res}</ThematicContext.Provider>;
 
   const [themePreference, setThemePreference] = useState<ThemePreference>(initialPreference);
@@ -185,30 +213,5 @@ export function RootThemeProvider({
     };
   }, []);
 
-  useEffect(() => {
-    const darkThemeClassName = "dark-theme";
-    const lightThemeAndDarkMenuClassName = "light-theme-and-dark-menu";
-    const meta = document.querySelector('meta[name="color-scheme"]');
-    let colorScheme = "light";
-    const documentElement = document.documentElement;
-    documentElement.classList.remove(darkThemeClassName);
-    documentElement.classList.remove(lightThemeAndDarkMenuClassName);
-    documentElement.classList.add(themeStyles);
-    if (themeMode === "dark") {
-      documentElement.classList.add(darkThemeClassName);
-      colorScheme = "dark";
-    } else if (themeMode === "light2") {
-      documentElement.classList.add(lightThemeAndDarkMenuClassName);
-    }
-
-    documentElement.style.colorScheme = colorScheme;
-    meta?.setAttribute("content", colorScheme);
-
-    return () => {
-      documentElement.classList.remove(darkThemeClassName);
-      documentElement.classList.remove(lightThemeAndDarkMenuClassName);
-    };
-  }, [themeMode]);
-
   return res;
 }

package/src/theme-settings.ts

@@ -1,3 +1,4 @@
+import {useEffect, useState} from "react";
 import {getMediaQueryList, subscribeOnChange as subscribeOnMediaQueryChange} from "./media-query-utils";
 
 const listenersThemeMode = new Map();
@@ -10,6 +11,7 @@ const themeMenuPreferenceKey = "theme-menu-preference";
 export type ThemePreference = "dark" | "light" | "auto";
 export type ThemeMenuPreference = "dark" | "auto";
 
+export const themeModes = ["dark", "light", "light2"] as const;
 export type ThemeMode = "dark" | "light" | "light2";
 
 export function getThemePreference(): ThemePreference {
@@ -56,22 +58,18 @@ function getDarkMediaQuery() {
 }
 
 export function getThemeMode(): ThemeMode {
-  const preference = getThemePreference();
-  const menuPreference = getThemeMenuPreference();
-
-  if (preference === "auto") {
-    const matches = getDarkMediaQuery().matches;
-    if (matches) {
+  const item = getThemePreference();
+  const menu = getThemeMenuPreference();
+  if (item === "auto") {
+    if (getDarkMediaQuery().matches) {
       return "dark";
-    }
-    if (menuPreference === "dark") {
+    } else if (menu === "dark") {
       return "light2";
     }
     return "light";
-  } else if (preference === "dark") {
+  } else if (item === "dark") {
     return "dark";
-  }
-  if (menuPreference === "dark") {
+  } else if (menu === "dark") {
     return "light2";
   }
   return "light";
@@ -171,3 +169,60 @@ export function subscribeOnThemeModeChange(cb: (themeMode: ThemeMode) => void):
     window.removeEventListener("storage", storageListener);
   };
 }
+
+const warmKey = "warm";
+const warmListeners = new Set<(warm: boolean) => void>();
+
+export function hasWarmPreference(): boolean {
+  try {
+    return localStorage.getItem(warmKey) !== null;
+  } catch {
+    return false;
+  }
+}
+
+export function loadWarmPreference(): boolean {
+  try {
+    return localStorage.getItem(warmKey) === "true";
+  } catch {
+    return false;
+  }
+}
+
+export function storeWarmPreference(warm: boolean) {
+  try {
+    localStorage.setItem(warmKey, JSON.stringify(warm));
+  } catch {
+    // ignore
+  }
+  warmListeners.forEach((cb) => cb(warm));
+}
+
+export function subscribeOnWarmPreferenceChange(cb: (warm: boolean) => void): () => void {
+  warmListeners.add(cb);
+  let prev = loadWarmPreference();
+  const storageListener = () => {
+    const next = loadWarmPreference();
+    if (prev !== next) {
+      prev = next;
+      cb(next);
+    }
+  };
+  window.addEventListener("storage", storageListener);
+  return () => {
+    warmListeners.delete(cb);
+    window.removeEventListener("storage", storageListener);
+  };
+}
+
+export function useWarmPreference() {
+  const [warm, setWarm] = useState(loadWarmPreference);
+  useEffect(() => subscribeOnWarmPreferenceChange(setWarm), []);
+  return [
+    warm,
+    (warm: boolean) => {
+      setWarm(warm);
+      storeWarmPreference(warm);
+    },
+  ] as const;
+}