@fibery/ui-kit 4.2.0 → 4.3.0

package/src/palettes/testkit.ts

@@ -1,16 +1,25 @@
 import {isRecord} from "@fibery/helpers/src/_";
 
 import {calcLc} from "../apca";
-import {backgrounds, type ColorDef, sections, stickers} from "../canvas-colors";
+import {avatarSwatches} from "../avatar-colors";
+import {backgrounds, type CanvasColorRole, darkFromLight, sections, stickers} from "../canvas-colors";
 import {inspectColor, type Opts} from "../color-inspect";
-import {colorFromUnsafe, cssFromColor, flattenAlpha, isValidColor, mixSrgb, produceColor} from "../color-utils";
+import {
+  colorFromUnsafe,
+  cssFromColor,
+  flattenAlpha,
+  isValidColor,
+  mixSrgb,
+  produceColor,
+  serializeHexVariadic,
+} from "../color-utils";
 import {defsFromPalette} from "../design-system/colors";
 import {enumFgCustomColorPercent, enumFgTextColorPercent} from "../design-system/colors-css";
 import {Swatch, swatches} from "../design-system/colors-swatches";
 import {mapDef} from "../design-system/def";
-import type {Theme} from "../design-system/theme.ts";
+import type {Theme} from "../design-system/theme";
 import type {ThemePalette} from "../design-system/types";
-import {withColorDiff} from "./diff-colors";
+import {renderLc, withColorDiff} from "./diff-colors";
 
 const COLOR_PREFIXES = ["rgba(", "rgb(", "hsla(", "hsl("] as const;
 const HEX_CHARS = "0123456789abcdefABCDEF";
@@ -19,16 +28,25 @@ function sealBuf(str: string) {
   return str.padEnd("0 8px 20px -4px ".length, " ");
 }
 
+function isInformationalSuffix(str: string) {
+  return /^ \| .+$/.test(str.trimEnd());
+}
+
 function replaceColorsInString(str: string, opts?: Opts) {
   const result: string[] = [];
   let buf = "";
   const seenColors = new Set<string>();
-  function add(verbose: string) {
+  function add(verbose: string, alignEmptyPrefix = true) {
     const seen = seenColors.has(verbose);
     seenColors.add(verbose);
-    result.push(sealBuf(buf) + verbose + (seen ? "(SAME!)" : ""));
+    const prefix = alignEmptyPrefix || buf || result.length > 0 ? sealBuf(buf) : "";
+    result.push(prefix + verbose + (seen ? "(SAME!)" : ""));
     buf = "";
   }
+  function addInformationalSuffix(from: number) {
+    result[result.length - 1] += str.slice(from);
+    return result.length === 1 ? result[0] : result;
+  }
 
   let i = 0;
   while (i < str.length) {
@@ -39,8 +57,12 @@ function replaceColorsInString(str: string, opts?: Opts) {
       if (closeIdx !== -1) {
         const candidate = str.slice(i, closeIdx + 1);
         if (isValidColor(candidate)) {
-          add(inspectColor(candidate, opts));
           i = closeIdx + 1;
+          if (str.startsWith(" | ", i)) {
+            add(inspectColor(candidate, opts), false);
+            return addInformationalSuffix(i);
+          }
+          add(inspectColor(candidate, opts));
           continue;
         }
       }
@@ -52,8 +74,12 @@ function replaceColorsInString(str: string, opts?: Opts) {
       }
       const candidate = str.slice(i, end);
       if (candidate.length >= 4 && isValidColor(candidate)) {
-        add(inspectColor(candidate, opts));
         i = end;
+        if (str.startsWith(" | ", i)) {
+          add(inspectColor(candidate, opts), false);
+          return addInformationalSuffix(i);
+        }
+        add(inspectColor(candidate, opts));
         continue;
       }
     }
@@ -72,6 +98,10 @@ function replaceColorsInString(str: string, opts?: Opts) {
     if (result.length === 0) {
       return buf;
     }
+    if (isInformationalSuffix(buf)) {
+      result[result.length - 1] += buf;
+      return result.length === 1 ? result[0] : result;
+    }
     result.push(sealBuf(buf));
   }
   return result.length === 1 ? result[0] : result;
@@ -137,6 +167,23 @@ export function userColorChoices<
   );
 }
 
+export function avatarColorChoices<
+  T extends
+    | string
+    | Readonly<Record<string, string>>
+    | readonly string[]
+    | ReadonlyArray<readonly [string, string] | Readonly<Record<string, string>>>,
+>(fn: (color: string) => T) {
+  const swatchKey = makeSwatchKey();
+  const globalIndex = new Map(swatches.map((c, i) => [c, i] as const));
+  return withColorDiff(
+    Object.fromEntries([
+      ...avatarSwatches.map((c) => [swatchKey(c, globalIndex.get(c) ?? -1), deepMapColors(fn(c))] as const),
+      ["neutral aka Swatch.Grey (no-access)", deepMapColors(fn(Swatch.Grey))] as const,
+    ])
+  );
+}
+
 export function makeSwatchKey() {
   const swatchNameByValue = new Map<string, string>(Object.entries(Swatch).map(([k, v]) => [v, k]));
   const nameWidth = Math.max(...swatches.map((x) => (swatchNameByValue.get(x) ?? "").length));
@@ -156,11 +203,12 @@ export function colors(palette: ThemePalette) {
     return `${prefix}[${String(i).padStart(width, " ")}]`;
   }
 
-  function pairs(colors: ColorDef[], prefix: string) {
+  function pairs(colors: readonly string[], prefix: string, role: CanvasColorRole) {
     const width = indexWidth(colors.length);
     return Object.fromEntries(
-      colors.map((pair, i) => {
-        return [key(prefix, i, width), mapDef(pair, defs.fns.deneutralize)];
+      colors.map((light, i) => {
+        const def: [string, string] = [light, darkFromLight(light, role)];
+        return [key(prefix, i, width), mapDef(def, defs.fns.deneutralize)];
       })
     );
   }
@@ -177,9 +225,9 @@ export function colors(palette: ThemePalette) {
         return [swatchKey(x, i), lightColor];
       })
     ),
-    ...pairs(stickers, "_.canvas.stickers"),
-    ...pairs(sections, "_.canvas.sections"),
-    ...pairs(backgrounds, "_.canvas.backgrounds"),
+    ...pairs(stickers, "_.canvas.stickers", "sticker"),
+    ...pairs(sections, "_.canvas.sections", "section"),
+    ...pairs(backgrounds, "_.canvas.backgrounds", "bg"),
   };
   return deepMapColors(colors);
 }
@@ -197,17 +245,25 @@ const getEnumTextColor = (theme: Theme, c: string) =>
     enumFgTextColorPercent / (enumFgCustomColorPercent + enumFgTextColorPercent)
   );
 
-function Lc(fg: string, bg: string) {
-  return Math.round(calcLc(fg, bg));
+type LcReference = {
+  color: string;
+  label?: string;
+};
+
+function renderReference({color, label}: LcReference) {
+  return [serializeHexVariadic(color) ?? color, label].filter(Boolean).join(" ");
 }
 
-function enumTest(cardSurface: string, cardColorCoding: string | null, theme: Theme, c: string) {
+function withLc(fg: string, bg: LcReference) {
+  return `${fg} | ${renderLc(calcLc(fg, bg.color))} over ${renderReference(bg)}`;
+}
+function enumTest(cardSurface: LcReference, cardColorCoding: string | null, theme: Theme, c: string) {
   const enumBg = theme.fns.enum(c, cardColorCoding).bg;
   const enumFg = getEnumTextColor(theme, c);
 
   return {
-    bg: `Lc=${Lc(enumBg, cardSurface)}; ${enumBg}`,
-    fg: `Lc=${Lc(enumFg, enumBg)}; ${enumFg}`,
+    bg: withLc(enumBg, cardSurface),
+    fg: withLc(enumFg, {color: enumBg, label: "bg"}),
   };
 }
 
@@ -222,8 +278,8 @@ export function enumBgCases(theme: Theme) {
     );
 
   return {
-    overDefaultSurface: (c: string) => enumTest(adaptDefaultSurface, null, theme, c),
-    overColorCoding: (c: string) => enumTest(paintedSurface(c), c, theme, c),
-    overSameColor: (c: string) => enumTest(c, c, theme, c),
+    overDefaultSurface: (c: string) => enumTest({color: adaptDefaultSurface, label: "panelBg"}, null, theme, c),
+    overColorCoding: (c: string) => enumTest({color: paintedSurface(c), label: "paintedSurface"}, c, theme, c),
+    overSameColor: (c: string) => enumTest({color: c, label: "card"}, c, theme, c),
   };
 }

package/src/phone.ts

@@ -0,0 +1,27 @@
+import {isFlagPresent} from "./flags";
+import {getMediaQueryList} from "./media-query-utils";
+
+declare global {
+  const __DISABLE_VERTICAL_MOBILE_BREAKPOINT__: boolean | undefined;
+}
+
+export const isPhoneApp = () =>
+  Boolean(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - injected by consumer app
+    window.__FIBERY_MOBILE_APP_API
+  );
+
+const disableStatic =
+  typeof __DISABLE_VERTICAL_MOBILE_BREAKPOINT__ !== "undefined" && __DISABLE_VERTICAL_MOBILE_BREAKPOINT__;
+const disableDynamic = disableStatic || isFlagPresent("no-vertical-mobile-breakpoint");
+const heightIgnored = "(max-width: 450px)";
+const heightPresent = "(max-width: 450px), (max-height: 450px)";
+
+export const phoneMediaQuery = disableStatic ? heightIgnored : heightPresent;
+
+export const phoneMediaQueryDynamic = disableDynamic ? heightIgnored : heightPresent;
+
+export function isPhoneMode() {
+  return isPhoneApp() || getMediaQueryList(phoneMediaQueryDynamic).matches;
+}

package/src/reactions/reaction-picker.tsx

@@ -8,7 +8,7 @@ import {IconButton} from "../button/icon-button";
 import {layout, space, themeVars} from "../design-system";
 import {type EmojiPickerProps} from "../emoji-picker/emoji-picker";
 import {useResponsiveEmojiSize} from "../emoji-picker/use-responsive-emoji-size";
-import AddReactions from "../icons/react/add-reactions";
+import ReactionsAdd from "../icons/react/reactions-add";
 import {mobileRootSelector} from "../mobile-styles";
 import {Popover} from "../popover";
 import {ToggleButton} from "../toggle-button/toggle-button";
@@ -91,7 +91,7 @@ export const ReactionPicker = ({mode, onSelect, open, onOpenChange, EmojiPicker}
               paddingInline: 0,
             }}
           >
-            <AddReactions iconSize={isPhone ? 20 : 16} />
+            <ReactionsAdd iconSize={isPhone ? 20 : 16} />
           </ToggleButton>
         ) : (
           <IconButton
@@ -103,7 +103,7 @@ export const ReactionPicker = ({mode, onSelect, open, onOpenChange, EmojiPicker}
             size="small"
             supportMobile
           >
-            <AddReactions />
+            <ReactionsAdd />
           </IconButton>
         )}
       </Tooltip>

package/src/rich-text-embed-error.tsx

@@ -2,7 +2,7 @@ import {css, cx} from "@linaria/core";
 import {type ReactNode} from "react";
 
 import {border, space, themeVars} from "./design-system";
-import ImageXmark from "./icons/react/image-xmark";
+import ImageError from "./icons/react/image-error";
 
 export const richTextEmbedErrorStyle = css`
   min-height: 380px;
@@ -41,7 +41,7 @@ type Props = {
 export const RichTextEmbedError = ({isSelected, label}: Props) => {
   return (
     <div className={cx(richTextEmbedErrorStyle, isSelected && selectedStyle)}>
-      <ImageXmark iconSize={32} color={themeVars.disabledTextColor} />
+      <ImageError iconSize={32} color={themeVars.disabledTextColor} />
       <div className={textStyle}>{label}</div>
     </div>
   );

package/src/root-theme-provider.test.tsx

@@ -12,7 +12,6 @@ import {
 } from "./theme-provider";
 import {storeWarmPreference} from "./theme-settings";
 import {locateThemeBundle} from "./theme-styles";
-import {prefix as themePrefix} from "./theming.generated";
 
 const {
   palette,
@@ -185,9 +184,9 @@ describe("RootThemeProvider", () => {
 
   describe("diff optimization integrity", () => {
     it("RootThemeProvider internal ThemeProvider only sets diff from base", () => {
-      const lightStyles = stylesFromTheme(themeLight, themePrefix);
+      const lightStyles = stylesFromTheme(themeLight);
       const lightTheme = themeFromPalette(palette, "light");
-      const actualStyles = stylesFromTheme(lightTheme, themePrefix);
+      const actualStyles = stylesFromTheme(lightTheme);
 
       // Count expected diff (theme from getThemeColors vs defaultLightTheme)
       let expectedDiffCount = 0;

package/src/select/select-in-popover.tsx

@@ -2,10 +2,11 @@ import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {Wrap} from "@fibery/react/src/wrap";
 import {css, cx} from "@linaria/core";
 import type {ForwardedRef, ReactNode, RefObject} from "react";
-import React, {forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
+import React, {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
 import type {SelectInstance} from "react-select";
 
 import {space, textClasses} from "../design-system";
+import {MobileDrawer} from "../mobile-drawer";
 import type {Placement} from "../popover";
 import {Popover} from "../popover";
 import {useIsPhone} from "../use-is-phone";
@@ -42,6 +43,7 @@ export const popupClassName = css`
 const mobileClassName = css`
   display: grid;
   min-height: 0;
+  height: 100%;
   padding-top: ${space.s12}px;
   padding-left: ${space.s12}px;
   padding-right: ${space.s12}px;
@@ -192,6 +194,42 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     ...components,
   };
 
+  const select = (
+    <SelectControlSettingsProvider inPopover={true} getPopupContainerElement={undefined}>
+      <ReactSelect<T, U, V>
+        {...rest}
+        autoFocus={isPhone ? false : rest.autoFocus}
+        ref={selectRef}
+        styles={composedStyles}
+        onKeyDown={onSelectKeyDown}
+        closeMenuOnSelect={false}
+        onChange={handleChange}
+        menuIsOpen
+        maxMenuHeight={maxMenuHeight}
+        disabled={disabled}
+        isCollectionMode={isCollectionMode}
+        isClearable={!isCollectionMode && isClearable}
+        {...otherSelectProps}
+        components={selectComponents}
+        inline
+      />
+    </SelectControlSettingsProvider>
+  );
+
+  if (isPhone) {
+    return (
+      <MobileDrawer
+        open={visible}
+        onOpenChange={onOpenChange}
+        title={title ?? ""}
+        trigger={isValidElement(trigger) ? trigger : undefined}
+        triggerRef={setTriggerElement}
+      >
+        <div className={mobileClassName}>{select}</div>
+      </MobileDrawer>
+    );
+  }
+
   return (
     <Popover.Root open={visible} onOpenChange={onOpenChange}>
       <Popover.Trigger ref={setTriggerElement} asChild triggerEvent="click">
@@ -199,36 +237,14 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
       </Popover.Trigger>
       <Wrap with={Popover.Portal} if={renderInPortal}>
         <Popover.Content
-          supportMobile
           title={title}
           offset={offset}
           popupContainerClassName={cx(defaultPopupContainerClassName, popupContainerClassName)}
           popupClassName={cx(popupClassName, popupStyles)}
-          mobilePopupContentClassName={mobileClassName}
           placement={popoverPlacement}
         >
-          {title && !isPhone && <div className={cx(textClasses.heading6, titleClassName)}>{title}</div>}
-          {/*Usually we set popupContainerElement for react-select via context (SelectControlSettingsProvider). But here we render react-select in popover.*/}
-          {/*Render target in controlled by Popover here. So we just override SelectControlContext here and set popupContainerElement to undefined. */}
-          {/*So in dom react-select will be a child of popover. */}
-          <SelectControlSettingsProvider inPopover={true} getPopupContainerElement={undefined}>
-            <ReactSelect<T, U, V>
-              {...rest}
-              ref={selectRef}
-              styles={composedStyles}
-              onKeyDown={onSelectKeyDown}
-              closeMenuOnSelect={false}
-              onChange={handleChange}
-              menuIsOpen
-              maxMenuHeight={maxMenuHeight}
-              disabled={disabled}
-              isCollectionMode={isCollectionMode}
-              isClearable={!isCollectionMode && isClearable}
-              {...otherSelectProps}
-              components={selectComponents}
-              inline
-            />
-          </SelectControlSettingsProvider>
+          {title && <div className={cx(textClasses.heading6, titleClassName)}>{title}</div>}
+          {select}
         </Popover.Content>
       </Wrap>
     </Popover.Root>

package/src/select/util.ts

@@ -29,5 +29,5 @@ export function countOptions<Option, Group extends GroupBase<Option>>(
   }, 0);
 }
 export function isPureTextChildren(children: ReactNode) {
-  return !Children.toArray(children).find((child) => !(typeof child === "string" || typeof child === "number"));
+  return !Children.toArray(children).some((child) => !(typeof child === "string" || typeof child === "number"));
 }

package/src/thematic.tsx

@@ -3,7 +3,7 @@ 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";
@@ -16,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";
@@ -153,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,
@@ -229,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 = (
@@ -496,7 +497,7 @@ export function Thematic() {
                       onMouseEnter={() => state.setPreviewPalette(null)}
                       title="Defaults"
                     >
-                      <Restore />
+                      <Undo />
                     </IconButton>
                   ) : null}
                   {(() => {

package/src/theme-provider.test.tsx

@@ -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>;