@fibery/ui-kit 3.0.0 → 4.0.0

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

@@ -11,16 +11,8 @@ import {Popover} from "../popover";
 import {useIsPhone} from "../use-is-phone";
 import {MenuTransparent} from "./components/menu";
 import {SELECT_IN_POPOVER_VALUE_MAX_HEIGHT} from "./constants";
-import type {
-  ActionMeta,
-  GroupBase,
-  OnChangeValue,
-  OptionsOrGroups,
-  PropsValue,
-  SelectProps,
-  StylesConfig,
-} from "./select";
-import {combineStyles, SelectComponent as ReactSelect} from "./select";
+import type {ActionMeta, GroupBase, OnChangeValue, SelectProps, StylesConfig} from "./select";
+import {composeStyles, SelectComponent as ReactSelect} from "./select";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
 import {makeSelectInPopoverStyles} from "./styles";
 
@@ -66,16 +58,12 @@ export type SelectInPopoverRef<T, U extends boolean, V extends GroupBase<T>> = {
 };
 
 type Props<T, U extends boolean, V extends GroupBase<T>> = {
-  value?: PropsValue<T>;
-  isSearchable?: boolean;
   menuIsOpen?: boolean;
-  options: OptionsOrGroups<T, V>;
   disabled?: boolean;
   isCollectionMode?: U;
   isClearable?: boolean;
   trigger?: ReactNode;
   title?: string;
-  maxMenuHeight?: number;
   hideOnChange?: boolean | ((newValue: OnChangeValue<T, U>, actionMeta: ActionMeta<T>) => boolean);
   renderInPortal?: boolean;
   popupContainerClassName?: string;
@@ -89,6 +77,8 @@ type Props<T, U extends boolean, V extends GroupBase<T>> = {
   popoverPlacement?: Placement;
 } & Pick<
   SelectProps<T, U, V>,
+  | "value"
+  | "options"
   | "placeholder"
   | "autoFocus"
   | "inputValue"
@@ -104,16 +94,15 @@ type Props<T, U extends boolean, V extends GroupBase<T>> = {
   | "onChange"
   | "onFocus"
   | "components"
+  | "isSearchable"
 >;
 
 function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
-  props: Omit<Props<T, U, V>, "maxMenuHeight">,
+  props: Props<T, U, V>,
   forwardedRef: ForwardedRef<SelectInPopoverRef<T, U, V>>
 ) {
   const {
-    value,
     menuIsOpen,
-    options,
     disabled,
     isCollectionMode,
     isClearable = true,
@@ -131,7 +120,6 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     getPopupContainer,
     onSelectKeyDown,
     otherSelectProps,
-    isSearchable = true,
     popoverPlacement = "bottom-start",
     ...rest
   } = props;
@@ -151,41 +139,42 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     selectRef,
   }));
 
-  const onHide = useCallback(() => {
-    const wasClosed = onMenuClose?.();
-    if (wasClosed === false) {
-      return;
-    }
-    setVisible(false);
-  }, [onMenuClose, setVisible]);
-
-  const onShow = useCallback(() => {
-    if (disabled) {
-      return;
-    }
-
-    setVisible(true);
-    if (onMenuOpen) {
-      onMenuOpen();
-    }
-  }, [disabled, onMenuOpen, setVisible]);
+  const onOpenChange = useCallback(
+    (value: boolean) => {
+      if (value) {
+        if (disabled) {
+          return;
+        }
+        setVisible(true);
+        onMenuOpen?.();
+      } else {
+        const wasClosed = onMenuClose?.();
+        if (wasClosed === false) {
+          return;
+        }
+        setVisible(false);
+      }
+    },
+    [disabled, onMenuOpen, setVisible, onMenuClose]
+  );
 
-  const styles = useMemo(() => {
-    return combineStyles<T, U, V>([makeSelectInPopoverStyles(isPhone), selectStyles]);
-  }, [selectStyles, isPhone]);
+  const composedStyles = useMemo(
+    () => composeStyles<T, U, V>([makeSelectInPopoverStyles(isPhone), selectStyles]),
+    [selectStyles, isPhone]
+  );
 
   const handleChange = useCallback(
     (newValue: OnChangeValue<T, U>, actionMeta: ActionMeta<T>) => {
       if (typeof hideOnChange === "function") {
         if (hideOnChange(newValue, actionMeta)) {
-          onHide();
+          onOpenChange(false);
         }
       } else if (hideOnChange) {
-        onHide();
+        onOpenChange(false);
       }
       onChange?.(newValue, actionMeta);
     },
-    [hideOnChange, onChange, onHide]
+    [hideOnChange, onChange, onOpenChange]
   );
 
   const paddingPopup = popupPaddingTop + popupPaddingBottom;
@@ -206,7 +195,7 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
   };
 
   return (
-    <Popover.Root open={visible} onOpen={() => onShow()} onClose={() => onHide()}>
+    <Popover.Root open={visible} onOpenChange={onOpenChange}>
       <Popover.Trigger ref={setTriggerElement} asChild triggerEvent="click">
         {trigger}
       </Popover.Trigger>
@@ -228,21 +217,15 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
             <ReactSelect<T, U, V>
               {...rest}
               ref={selectRef}
-              styles={styles}
-              isSearchable={isSearchable}
+              styles={composedStyles}
               onKeyDown={onSelectKeyDown}
-              value={value}
-              controlShouldRenderValue
-              closeMenuOnScroll={false}
               closeMenuOnSelect={false}
               onChange={handleChange}
-              options={options || []}
               menuIsOpen
               maxMenuHeight={maxMenuHeight}
               disabled={disabled}
               isCollectionMode={isCollectionMode}
               isClearable={!isCollectionMode && isClearable}
-              menuShouldBlockScroll={false}
               {...otherSelectProps}
               components={selectComponents}
               inline
@@ -255,7 +238,7 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
 }
 
 type SelectInPopoverType = <T, U extends boolean, V extends GroupBase<T>>(
-  props: Omit<Props<T, U, V>, "maxMenuHeight"> & {ref?: ForwardedRef<SelectInPopoverRef<T, U, V>>}
+  props: Props<T, U, V> & {ref?: ForwardedRef<SelectInPopoverRef<T, U, V>>}
 ) => ReturnType<typeof SelectInPopoverInner>;
 
 export const SelectInPopover = forwardRef(SelectInPopoverInner) as SelectInPopoverType;

package/src/select/select.tsx

@@ -62,7 +62,7 @@ function GroupVirtualized() {
   return null;
 }
 
-export function combineStyles<T, U extends boolean, V extends GroupBase<T>>(styles: StylesConfig<T, U, V>[]) {
+export function composeStyles<T, U extends boolean, V extends GroupBase<T>>(styles: StylesConfig<T, U, V>[]) {
   return styles.reduce(mergeStyles, {});
 }
 
@@ -127,7 +127,7 @@ function useSelectStyles<T, U extends boolean, V extends GroupBase<T>>({
   styles?: SelectProps<T, U, V>["styles"];
 }) {
   return useMemo(() => {
-    return combineStyles<T, U, V>(
+    return composeStyles<T, U, V>(
       compact([
         makeComponentsStyles<T, U, V>(),
         virtualized ? makeVirtualizedStyles<T, U, V>() : makeNonVirtualizedStyles<T, U, V>(),

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";
+import {neutralStyles, prefix as themePrefix} from "./theming.generated";
 
 const {
   palette,

package/src/theme-provider.tsx

@@ -3,6 +3,7 @@ import invariant from "invariant";
 import type {PropsWithChildren, ReactNode} from "react";
 import {createContext, forwardRef, useContext, useEffect, useLayoutEffect, useMemo, useState} from "react";
 
+import {globalOverrides} from "./antd/global-overrides";
 import type {Styles, Theme} from "./design-system/theme";
 import {stylesFromTheme, themeFromPalette} from "./design-system/theme";
 import type {ThemePalette} from "./design-system/types";
@@ -11,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";
+import {neutralStyles, prefix as themePrefix, warmStyles} from "./theming.generated";
 
 const darkClassName = "dark-theme";
 const warmClassName = "warm-palette";
@@ -50,6 +51,7 @@ function chooseGlobalStyles(themeMode: ThemeMode, warm: boolean) {
   colorSchemeMeta?.setAttribute("content", colorScheme);
 
   htmlElement.classList.add(globals);
+  htmlElement.classList.add(globalOverrides);
 }
 
 const ThemePreferenceContext = createContext<ThemePreference | null>(null);
@@ -76,14 +78,6 @@ export function useThemeMode(): ThemeMode {
   return theme.mode;
 }
 
-/** @deprecated Use `useThemedColor` instead */
-export const useNeutralColor = useThemedColor;
-
-export function useThemedColor(color: string) {
-  const theme = useTheme();
-  return theme.fns.deneutralize(color);
-}
-
 const RootThemeStylesContext = createContext<Styles>(coolLightThemeStyles);
 const ThemeStylesContext = createContext<Styles>(coolLightThemeStyles);
 

package/src/theme-snapshots.test.ts

@@ -1,9 +1,7 @@
 import {format, type FormatConfig} from "oxfmt";
 
 import oxfmtConfig from "../../../.oxfmtrc.json" with {type: "json"};
-import {buildThemingSnapshot} from "./theming/build";
-
-const PREFIXES = ["fibery", "vzdbery"] as const;
+import {buildThemingSnapshot} from "./theming.build";
 
 async function renderTs(prefix: string): Promise<string> {
   const s = buildThemingSnapshot(prefix);
@@ -49,14 +47,12 @@ async function renderCss(prefix: string): Promise<string> {
   return code;
 }
 
-for (const prefix of PREFIXES) {
-  test(`theming-${prefix}.snapshot.ts`, async () => {
-    const source = await renderTs(prefix);
-    await expect(source).toMatchFileSnapshot(`./theming/theming-${prefix}.snapshot.ts`);
-  });
+test(`theming-fibery.generated.ts`, async () => {
+  const source = await renderTs("fibery");
+  await expect(source).toMatchFileSnapshot(`./theming.generated.ts`);
+});
 
-  test(`theming-${prefix}.snapshot.css`, async () => {
-    const source = await renderCss(prefix);
-    await expect(source).toMatchFileSnapshot(`./theming/theming-${prefix}.snapshot.css`);
-  });
-}
+test(`theming-fibery.generated.css`, async () => {
+  const source = await renderCss("fibery");
+  await expect(source).toMatchFileSnapshot(`./theming.generated.css`);
+});

package/src/{theming/build.ts → theming.build.ts}

@@ -1,13 +1,10 @@
-// Builder for prefix-baked theming snapshots. Internal to ui-kit;
-// not re-exported through ./theming/index.ts. The snapshot test in
-// theme-snapshots.test.ts is the only intended caller — it freezes
-// the output into theming-<prefix>.snapshot.{ts,css} files.
+// 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 {locateThemeBundle} from "../theme-styles";
+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 {locateThemeBundle} from "./theme-styles";
 
 export type ThemingSnapshot = LayoutVarNames & {
   prefix: string;

package/src/{theming/theming-fibery.snapshot.css → theming.generated.css}

@@ -1016,30 +1016,30 @@
   --fibery-color-shadowPopup:
     0 0 2px 0 rgba(99, 94, 87, 0.3), 0 4px 6px 0 rgba(99, 94, 87, 0.05), 0 10px 26px 0 rgba(99, 94, 87, 0.15);
   --fibery-color-shadowSidebar: -3px 0 10px 0 rgba(125, 119, 112, 0.1);
-  --fibery-color-highlightBgYellow: rgb(253, 234, 192);
-  --fibery-color-highlightFgYellow: rgb(155, 129, 49);
-  --fibery-color-highlightFgOnBgYellow: rgb(126, 104, 40);
-  --fibery-color-highlightBgGreen: rgb(218, 244, 203);
-  --fibery-color-highlightFgGreen: rgb(94, 142, 43);
-  --fibery-color-highlightFgOnBgGreen: rgb(78, 118, 36);
-  --fibery-color-highlightBgAquamarine: rgb(198, 246, 220);
-  --fibery-color-highlightFgAquamarine: rgb(66, 144, 100);
-  --fibery-color-highlightFgOnBgAquamarine: rgb(54, 118, 82);
-  --fibery-color-highlightBgAqua: rgb(188, 247, 236);
-  --fibery-color-highlightFgAqua: rgb(61, 143, 123);
-  --fibery-color-highlightFgOnBgAqua: rgb(50, 118, 102);
-  --fibery-color-highlightBgBlue: rgb(224, 237, 254);
-  --fibery-color-highlightFgBlue: rgb(79, 129, 210);
-  --fibery-color-highlightFgOnBgBlue: rgb(65, 106, 172);
+  --fibery-color-highlightBgYellow: rgb(254, 234, 191);
+  --fibery-color-highlightFgYellow: rgb(156, 125, 38);
+  --fibery-color-highlightFgOnBgYellow: rgb(130, 104, 30);
+  --fibery-color-highlightBgGreen: rgb(218, 245, 202);
+  --fibery-color-highlightFgGreen: rgb(93, 143, 39);
+  --fibery-color-highlightFgOnBgGreen: rgb(76, 119, 31);
+  --fibery-color-highlightBgAquamarine: rgb(196, 247, 221);
+  --fibery-color-highlightFgAquamarine: rgb(55, 145, 100);
+  --fibery-color-highlightFgOnBgAquamarine: rgb(43, 120, 82);
+  --fibery-color-highlightBgAqua: rgb(186, 248, 238);
+  --fibery-color-highlightFgAqua: rgb(46, 144, 127);
+  --fibery-color-highlightFgOnBgAqua: rgb(36, 119, 105);
+  --fibery-color-highlightBgBlue: rgb(223, 237, 255);
+  --fibery-color-highlightFgBlue: rgb(76, 129, 213);
+  --fibery-color-highlightFgOnBgBlue: rgb(60, 107, 177);
   --fibery-color-highlightBgPurple: rgb(244, 231, 255);
   --fibery-color-highlightFgPurple: rgb(176, 89, 226);
   --fibery-color-highlightFgOnBgPurple: rgb(151, 63, 199);
-  --fibery-color-highlightBgPink: rgb(254, 229, 242);
+  --fibery-color-highlightBgPink: rgb(255, 229, 242);
   --fibery-color-highlightFgPink: rgb(212, 73, 166);
   --fibery-color-highlightFgOnBgPink: rgb(178, 56, 139);
-  --fibery-color-highlightBgRed: rgb(252, 231, 229);
+  --fibery-color-highlightBgRed: rgb(254, 230, 227);
   --fibery-color-highlightFgRed: rgb(227, 70, 74);
-  --fibery-color-highlightFgOnBgRed: rgb(193, 51, 56);
+  --fibery-color-highlightFgOnBgRed: rgb(191, 50, 55);
   --fibery-color-highlightBgGrey: rgb(236, 235, 235);
   --fibery-color-highlightFgGrey: rgb(135, 128, 128);
   --fibery-color-highlightFgOnBgGrey: rgb(111, 105, 104);
@@ -1219,11 +1219,11 @@
   --fibery-color-allowedDropColor: rgb(243, 236, 229);
   --fibery-color-relationViewBgColor: rgb(253, 246, 239);
   --fibery-color-mySpaceIconColor: rgb(129, 133, 137);
-  --fibery-color-mySpaceIconBg: rgba(122, 133, 148, 0.2);
-  --fibery-color-privateIconColor: rgb(120, 166, 105);
-  --fibery-color-privateIconBg: rgba(120, 166, 105, 0.2);
-  --fibery-color-favoritesIconColor: rgb(232, 171, 73);
-  --fibery-color-favoritesIconBg: rgba(232, 171, 73, 0.2);
+  --fibery-color-mySpaceIconBg: rgba(112, 132, 153, 0.2);
+  --fibery-color-privateIconColor: rgb(116, 168, 101);
+  --fibery-color-privateIconBg: rgba(116, 168, 101, 0.2);
+  --fibery-color-favoritesIconColor: rgb(235, 169, 68);
+  --fibery-color-favoritesIconBg: rgba(235, 169, 68, 0.2);
   --fibery-color-swatchDefault: #1fbed3;
   --fibery-color-unitBg: rgb(250, 244, 236);
   --fibery-color-unitBgHover: rgb(243, 236, 229);
@@ -1515,30 +1515,30 @@
   --fibery-color-shadowPopup:
     0 0 0 1px rgb(55, 50, 48), 0 4px 6px 0 rgba(26, 22, 20, 0.05), 0 10px 26px 0 rgba(26, 22, 20, 0.15);
   --fibery-color-shadowSidebar: -3px 0 10px 0 rgba(26, 22, 20, 0.8);
-  --fibery-color-highlightBgYellow: rgb(77, 66, 35);
-  --fibery-color-highlightFgYellow: rgb(211, 185, 113);
-  --fibery-color-highlightFgOnBgYellow: rgb(231, 202, 125);
-  --fibery-color-highlightBgGreen: rgb(56, 70, 44);
-  --fibery-color-highlightFgGreen: rgb(163, 198, 135);
-  --fibery-color-highlightFgOnBgGreen: rgb(178, 214, 149);
-  --fibery-color-highlightBgAquamarine: rgb(42, 72, 54);
-  --fibery-color-highlightFgAquamarine: rgb(133, 202, 160);
-  --fibery-color-highlightFgOnBgAquamarine: rgb(145, 220, 175);
-  --fibery-color-highlightBgAqua: rgb(33, 72, 63);
-  --fibery-color-highlightFgAqua: rgb(111, 204, 180);
-  --fibery-color-highlightFgOnBgAqua: rgb(120, 221, 197);
-  --fibery-color-highlightBgBlue: rgb(53, 66, 85);
-  --fibery-color-highlightFgBlue: rgb(160, 189, 235);
-  --fibery-color-highlightFgOnBgBlue: rgb(182, 205, 239);
-  --fibery-color-highlightBgPurple: rgb(74, 60, 85);
-  --fibery-color-highlightFgPurple: rgb(210, 175, 234);
-  --fibery-color-highlightFgOnBgPurple: rgb(224, 191, 247);
-  --fibery-color-highlightBgPink: rgb(83, 58, 72);
-  --fibery-color-highlightFgPink: rgb(231, 170, 205);
-  --fibery-color-highlightFgOnBgPink: rgb(244, 187, 220);
-  --fibery-color-highlightBgRed: rgb(87, 58, 56);
-  --fibery-color-highlightFgRed: rgb(231, 174, 169);
-  --fibery-color-highlightFgOnBgRed: rgb(238, 193, 189);
+  --fibery-color-highlightBgYellow: rgb(78, 64, 26);
+  --fibery-color-highlightFgYellow: rgb(215, 184, 106);
+  --fibery-color-highlightFgOnBgYellow: rgb(232, 200, 119);
+  --fibery-color-highlightBgGreen: rgb(53, 71, 39);
+  --fibery-color-highlightFgGreen: rgb(160, 199, 130);
+  --fibery-color-highlightFgOnBgGreen: rgb(175, 216, 146);
+  --fibery-color-highlightBgAquamarine: rgb(41, 80, 60);
+  --fibery-color-highlightFgAquamarine: rgb(124, 205, 160);
+  --fibery-color-highlightFgOnBgAquamarine: rgb(140, 225, 180);
+  --fibery-color-highlightBgAqua: rgb(18, 73, 64);
+  --fibery-color-highlightFgAqua: rgb(98, 205, 183);
+  --fibery-color-highlightFgOnBgAqua: rgb(112, 222, 200);
+  --fibery-color-highlightBgBlue: rgb(47, 66, 94);
+  --fibery-color-highlightFgBlue: rgb(152, 189, 243);
+  --fibery-color-highlightFgOnBgBlue: rgb(175, 206, 248);
+  --fibery-color-highlightBgPurple: rgb(77, 58, 89);
+  --fibery-color-highlightFgPurple: rgb(211, 172, 239);
+  --fibery-color-highlightFgOnBgPurple: rgb(224, 190, 250);
+  --fibery-color-highlightBgPink: rgb(88, 55, 75);
+  --fibery-color-highlightFgPink: rgb(237, 167, 207);
+  --fibery-color-highlightFgOnBgPink: rgb(249, 184, 221);
+  --fibery-color-highlightBgRed: rgb(93, 55, 53);
+  --fibery-color-highlightFgRed: rgb(240, 170, 164);
+  --fibery-color-highlightFgOnBgRed: rgb(246, 190, 185);
   --fibery-color-highlightBgGrey: rgb(70, 64, 64);
   --fibery-color-highlightFgGrey: rgb(193, 186, 186);
   --fibery-color-highlightFgOnBgGrey: rgb(208, 202, 202);
@@ -1718,11 +1718,11 @@
   --fibery-color-allowedDropColor: rgb(45, 40, 38);
   --fibery-color-relationViewBgColor: rgb(39, 35, 33);
   --fibery-color-mySpaceIconColor: rgb(129, 133, 137);
-  --fibery-color-mySpaceIconBg: rgba(122, 133, 148, 0.2);
-  --fibery-color-privateIconColor: rgb(120, 166, 105);
-  --fibery-color-privateIconBg: rgba(120, 166, 105, 0.2);
-  --fibery-color-favoritesIconColor: rgb(232, 171, 73);
-  --fibery-color-favoritesIconBg: rgba(232, 171, 73, 0.2);
+  --fibery-color-mySpaceIconBg: rgba(112, 132, 153, 0.2);
+  --fibery-color-privateIconColor: rgb(116, 168, 101);
+  --fibery-color-privateIconBg: rgba(116, 168, 101, 0.2);
+  --fibery-color-favoritesIconColor: rgb(235, 169, 68);
+  --fibery-color-favoritesIconBg: rgba(235, 169, 68, 0.2);
   --fibery-color-swatchDefault: #1fbed3;
   --fibery-color-unitBg: rgb(55, 50, 48);
   --fibery-color-unitBgHover: rgb(65, 60, 58);

package/src/{theming/theming-fibery.snapshot.ts → theming.generated.ts}

@@ -1529,30 +1529,30 @@ export const warmStyles = {
     "--fibery-color-shadowPopup":
       "0 0 2px 0 rgba(99, 94, 87, 0.3), 0 4px 6px 0 rgba(99, 94, 87, 0.05), 0 10px 26px 0 rgba(99, 94, 87, 0.15)",
     "--fibery-color-shadowSidebar": "-3px 0 10px 0 rgba(125, 119, 112, 0.1)",
-    "--fibery-color-highlightBgYellow": "rgb(253, 234, 192)",
-    "--fibery-color-highlightFgYellow": "rgb(155, 129, 49)",
-    "--fibery-color-highlightFgOnBgYellow": "rgb(126, 104, 40)",
-    "--fibery-color-highlightBgGreen": "rgb(218, 244, 203)",
-    "--fibery-color-highlightFgGreen": "rgb(94, 142, 43)",
-    "--fibery-color-highlightFgOnBgGreen": "rgb(78, 118, 36)",
-    "--fibery-color-highlightBgAquamarine": "rgb(198, 246, 220)",
-    "--fibery-color-highlightFgAquamarine": "rgb(66, 144, 100)",
-    "--fibery-color-highlightFgOnBgAquamarine": "rgb(54, 118, 82)",
-    "--fibery-color-highlightBgAqua": "rgb(188, 247, 236)",
-    "--fibery-color-highlightFgAqua": "rgb(61, 143, 123)",
-    "--fibery-color-highlightFgOnBgAqua": "rgb(50, 118, 102)",
-    "--fibery-color-highlightBgBlue": "rgb(224, 237, 254)",
-    "--fibery-color-highlightFgBlue": "rgb(79, 129, 210)",
-    "--fibery-color-highlightFgOnBgBlue": "rgb(65, 106, 172)",
+    "--fibery-color-highlightBgYellow": "rgb(254, 234, 191)",
+    "--fibery-color-highlightFgYellow": "rgb(156, 125, 38)",
+    "--fibery-color-highlightFgOnBgYellow": "rgb(130, 104, 30)",
+    "--fibery-color-highlightBgGreen": "rgb(218, 245, 202)",
+    "--fibery-color-highlightFgGreen": "rgb(93, 143, 39)",
+    "--fibery-color-highlightFgOnBgGreen": "rgb(76, 119, 31)",
+    "--fibery-color-highlightBgAquamarine": "rgb(196, 247, 221)",
+    "--fibery-color-highlightFgAquamarine": "rgb(55, 145, 100)",
+    "--fibery-color-highlightFgOnBgAquamarine": "rgb(43, 120, 82)",
+    "--fibery-color-highlightBgAqua": "rgb(186, 248, 238)",
+    "--fibery-color-highlightFgAqua": "rgb(46, 144, 127)",
+    "--fibery-color-highlightFgOnBgAqua": "rgb(36, 119, 105)",
+    "--fibery-color-highlightBgBlue": "rgb(223, 237, 255)",
+    "--fibery-color-highlightFgBlue": "rgb(76, 129, 213)",
+    "--fibery-color-highlightFgOnBgBlue": "rgb(60, 107, 177)",
     "--fibery-color-highlightBgPurple": "rgb(244, 231, 255)",
     "--fibery-color-highlightFgPurple": "rgb(176, 89, 226)",
     "--fibery-color-highlightFgOnBgPurple": "rgb(151, 63, 199)",
-    "--fibery-color-highlightBgPink": "rgb(254, 229, 242)",
+    "--fibery-color-highlightBgPink": "rgb(255, 229, 242)",
     "--fibery-color-highlightFgPink": "rgb(212, 73, 166)",
     "--fibery-color-highlightFgOnBgPink": "rgb(178, 56, 139)",
-    "--fibery-color-highlightBgRed": "rgb(252, 231, 229)",
+    "--fibery-color-highlightBgRed": "rgb(254, 230, 227)",
     "--fibery-color-highlightFgRed": "rgb(227, 70, 74)",
-    "--fibery-color-highlightFgOnBgRed": "rgb(193, 51, 56)",
+    "--fibery-color-highlightFgOnBgRed": "rgb(191, 50, 55)",
     "--fibery-color-highlightBgGrey": "rgb(236, 235, 235)",
     "--fibery-color-highlightFgGrey": "rgb(135, 128, 128)",
     "--fibery-color-highlightFgOnBgGrey": "rgb(111, 105, 104)",
@@ -1737,11 +1737,11 @@ export const warmStyles = {
     "--fibery-color-allowedDropColor": "rgb(243,236,229)",
     "--fibery-color-relationViewBgColor": "rgb(253,246,239)",
     "--fibery-color-mySpaceIconColor": "rgb(129, 133, 137)",
-    "--fibery-color-mySpaceIconBg": "rgba(122, 133, 148, 0.2)",
-    "--fibery-color-privateIconColor": "rgb(120, 166, 105)",
-    "--fibery-color-privateIconBg": "rgba(120, 166, 105, 0.2)",
-    "--fibery-color-favoritesIconColor": "rgb(232, 171, 73)",
-    "--fibery-color-favoritesIconBg": "rgba(232, 171, 73, 0.2)",
+    "--fibery-color-mySpaceIconBg": "rgba(112, 132, 153, 0.2)",
+    "--fibery-color-privateIconColor": "rgb(116, 168, 101)",
+    "--fibery-color-privateIconBg": "rgba(116, 168, 101, 0.2)",
+    "--fibery-color-favoritesIconColor": "rgb(235, 169, 68)",
+    "--fibery-color-favoritesIconBg": "rgba(235, 169, 68, 0.2)",
     "--fibery-color-swatchDefault": "#1FBED3",
     "--fibery-color-unitBg": "rgb(250,244,236)",
     "--fibery-color-unitBgHover": "rgb(243,236,229)",
@@ -2033,30 +2033,30 @@ export const warmStyles = {
     "--fibery-color-shadowPopup":
       "0 0 0 1px rgb(55,50,48), 0 4px 6px 0 rgba(26, 22, 20, 0.05), 0 10px 26px 0 rgba(26, 22, 20, 0.15)",
     "--fibery-color-shadowSidebar": "-3px 0 10px 0 rgba(26, 22, 20, 0.8)",
-    "--fibery-color-highlightBgYellow": "rgb(77, 66, 35)",
-    "--fibery-color-highlightFgYellow": "rgb(211, 185, 113)",
-    "--fibery-color-highlightFgOnBgYellow": "rgb(231, 202, 125)",
-    "--fibery-color-highlightBgGreen": "rgb(56, 70, 44)",
-    "--fibery-color-highlightFgGreen": "rgb(163, 198, 135)",
-    "--fibery-color-highlightFgOnBgGreen": "rgb(178, 214, 149)",
-    "--fibery-color-highlightBgAquamarine": "rgb(42, 72, 54)",
-    "--fibery-color-highlightFgAquamarine": "rgb(133, 202, 160)",
-    "--fibery-color-highlightFgOnBgAquamarine": "rgb(145, 220, 175)",
-    "--fibery-color-highlightBgAqua": "rgb(33, 72, 63)",
-    "--fibery-color-highlightFgAqua": "rgb(111, 204, 180)",
-    "--fibery-color-highlightFgOnBgAqua": "rgb(120, 221, 197)",
-    "--fibery-color-highlightBgBlue": "rgb(53, 66, 85)",
-    "--fibery-color-highlightFgBlue": "rgb(160, 189, 235)",
-    "--fibery-color-highlightFgOnBgBlue": "rgb(182, 205, 239)",
-    "--fibery-color-highlightBgPurple": "rgb(74, 60, 85)",
-    "--fibery-color-highlightFgPurple": "rgb(210, 175, 234)",
-    "--fibery-color-highlightFgOnBgPurple": "rgb(224, 191, 247)",
-    "--fibery-color-highlightBgPink": "rgb(83, 58, 72)",
-    "--fibery-color-highlightFgPink": "rgb(231, 170, 205)",
-    "--fibery-color-highlightFgOnBgPink": "rgb(244, 187, 220)",
-    "--fibery-color-highlightBgRed": "rgb(87, 58, 56)",
-    "--fibery-color-highlightFgRed": "rgb(231, 174, 169)",
-    "--fibery-color-highlightFgOnBgRed": "rgb(238, 193, 189)",
+    "--fibery-color-highlightBgYellow": "rgb(78, 64, 26)",
+    "--fibery-color-highlightFgYellow": "rgb(215, 184, 106)",
+    "--fibery-color-highlightFgOnBgYellow": "rgb(232, 200, 119)",
+    "--fibery-color-highlightBgGreen": "rgb(53, 71, 39)",
+    "--fibery-color-highlightFgGreen": "rgb(160, 199, 130)",
+    "--fibery-color-highlightFgOnBgGreen": "rgb(175, 216, 146)",
+    "--fibery-color-highlightBgAquamarine": "rgb(41, 80, 60)",
+    "--fibery-color-highlightFgAquamarine": "rgb(124, 205, 160)",
+    "--fibery-color-highlightFgOnBgAquamarine": "rgb(140, 225, 180)",
+    "--fibery-color-highlightBgAqua": "rgb(18, 73, 64)",
+    "--fibery-color-highlightFgAqua": "rgb(98, 205, 183)",
+    "--fibery-color-highlightFgOnBgAqua": "rgb(112, 222, 200)",
+    "--fibery-color-highlightBgBlue": "rgb(47, 66, 94)",
+    "--fibery-color-highlightFgBlue": "rgb(152, 189, 243)",
+    "--fibery-color-highlightFgOnBgBlue": "rgb(175, 206, 248)",
+    "--fibery-color-highlightBgPurple": "rgb(77, 58, 89)",
+    "--fibery-color-highlightFgPurple": "rgb(211, 172, 239)",
+    "--fibery-color-highlightFgOnBgPurple": "rgb(224, 190, 250)",
+    "--fibery-color-highlightBgPink": "rgb(88, 55, 75)",
+    "--fibery-color-highlightFgPink": "rgb(237, 167, 207)",
+    "--fibery-color-highlightFgOnBgPink": "rgb(249, 184, 221)",
+    "--fibery-color-highlightBgRed": "rgb(93, 55, 53)",
+    "--fibery-color-highlightFgRed": "rgb(240, 170, 164)",
+    "--fibery-color-highlightFgOnBgRed": "rgb(246, 190, 185)",
     "--fibery-color-highlightBgGrey": "rgb(70, 64, 64)",
     "--fibery-color-highlightFgGrey": "rgb(193, 186, 186)",
     "--fibery-color-highlightFgOnBgGrey": "rgb(208, 202, 202)",
@@ -2236,11 +2236,11 @@ export const warmStyles = {
     "--fibery-color-allowedDropColor": "rgb(45,40,38)",
     "--fibery-color-relationViewBgColor": "rgb(39,35,33)",
     "--fibery-color-mySpaceIconColor": "rgb(129, 133, 137)",
-    "--fibery-color-mySpaceIconBg": "rgba(122, 133, 148, 0.2)",
-    "--fibery-color-privateIconColor": "rgb(120, 166, 105)",
-    "--fibery-color-privateIconBg": "rgba(120, 166, 105, 0.2)",
-    "--fibery-color-favoritesIconColor": "rgb(232, 171, 73)",
-    "--fibery-color-favoritesIconBg": "rgba(232, 171, 73, 0.2)",
+    "--fibery-color-mySpaceIconBg": "rgba(112, 132, 153, 0.2)",
+    "--fibery-color-privateIconColor": "rgb(116, 168, 101)",
+    "--fibery-color-privateIconBg": "rgba(116, 168, 101, 0.2)",
+    "--fibery-color-favoritesIconColor": "rgb(235, 169, 68)",
+    "--fibery-color-favoritesIconBg": "rgba(235, 169, 68, 0.2)",
     "--fibery-color-swatchDefault": "#1FBED3",
     "--fibery-color-unitBg": "rgb(55,50,48)",
     "--fibery-color-unitBgHover": "rgb(65,60,58)",

package/src/{themed-ink.tsx → type-label.tsx}

@@ -5,21 +5,18 @@ import {useTheme} from "./theme-provider";
 type ThemedInkProps = {
   as?: "span" | "div";
   fg?: string;
-  bg?: string;
   style?: CSSProperties;
   className?: string;
   children?: ReactNode;
 };
 
-export const ThemedInk = ({as: Tag = "span", fg, bg, style, ...rest}: ThemedInkProps) => {
+export const TypeLabel = ({as: Tag = "span", fg, style, ...rest}: ThemedInkProps) => {
   const theme = useTheme();
-  const dn = theme.fns.deneutralize;
   return (
     <Tag
       style={{
         ...style,
-        ...(fg && {color: dn(fg)}),
-        ...(bg && {backgroundColor: dn(bg)}),
+        ...(fg && {color: theme.fns.typeLabelFg(fg)}),
       }}
       {...rest}
     />

package/src/antd/auto-complete.d.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const AntAutoComplete: FunctionComponent<any>;