@fibery/ui-kit 2.0.0 → 2.1.0

package/src/theme-styles.ts

@@ -1,40 +1,53 @@
 import {css} from "@linaria/core";
-import {createInlineStyles, getThemeColors, ThemeColors, ThemeStyles} from "./design-system";
+import {Styles, stylesFromTheme, Theme, ThemeDefs} from "./design-system";
 import {warmUserPalette} from "./palettes/warm-user";
-import {slateUserPalette} from "./palettes/slate-user";
+import {neutralUserPalette} from "./palettes/neutral-user";
 import {ThemeMode} from "./theme-settings";
+import {defsFromPalette} from "./design-system/colors";
+import {themeFromDefs} from "./design-system/theme";
+import {ThemePalette} from "./palette-generator";
 
-export const defaultPalette = slateUserPalette;
-export const defaultLightTheme = getThemeColors(null, "light", defaultPalette);
-export const defaultDarkTheme = getThemeColors(null, "dark", defaultPalette);
+type Pair<T> = readonly [light: T, dark: T];
 
-const warmPalette = warmUserPalette;
-const warmLightTheme = getThemeColors(null, "light", warmPalette);
-const warmDarkTheme = getThemeColors(null, "dark", warmPalette);
+function make(palette: ThemePalette): {
+  defs: ThemeDefs;
+  palette: ThemePalette;
+  themes: Pair<Theme>;
+  styles: Pair<Styles>;
+} {
+  const defs = defsFromPalette(palette);
+  const themeLight = themeFromDefs(defs, "light");
+  const themeDark = themeFromDefs(defs, "dark");
+  return {
+    defs,
+    palette,
+    themes: [themeLight, themeDark],
+    styles: [stylesFromTheme(themeLight), stylesFromTheme(themeDark)],
+  };
+}
 
-export const defaultLightThemeStyles = createInlineStyles(defaultLightTheme);
-export const defaultDarkThemeStyles = createInlineStyles(defaultDarkTheme);
+const neutral = make(neutralUserPalette);
+const warm = make(warmUserPalette);
 
-const warmLightThemeStyles = createInlineStyles(warmLightTheme);
-const warmDarkThemeStyles = createInlineStyles(warmDarkTheme);
+export function locateThemeBundle(warmer: boolean) {
+  return warmer ? warm : neutral;
+}
 
-export function selectGlobalTheme(warm: boolean, dark: boolean): [colors: ThemeColors, styles: ThemeStyles] {
-  if (warm) {
-    return dark ? [warmDarkTheme, warmDarkThemeStyles] : [warmLightTheme, warmLightThemeStyles];
-  } else {
-    return dark ? [defaultDarkTheme, defaultDarkThemeStyles] : [defaultLightTheme, defaultLightThemeStyles];
-  }
+export function locateTheme(warmer: boolean, mode: ThemeMode): Theme {
+  const themes = warmer ? warm.themes : neutral.themes;
+  return themes[Number(mode === "dark")];
 }
 
 const darkClassName = "dark-theme";
 const light2ClassName = "light-theme-and-dark-menu";
 const warmClassName = "warm-palette";
+const warmStickyClassName = "warm-palette-sticky";
 
 export function chooseGlobalStyles(themeMode: ThemeMode, warm: boolean) {
   const htmlElement = document.documentElement;
   htmlElement.classList.toggle(darkClassName, themeMode === "dark");
   htmlElement.classList.toggle(light2ClassName, themeMode === "light2");
-  htmlElement.classList.toggle(warmClassName, warm);
+  htmlElement.classList.toggle(warmClassName, warm || htmlElement.classList.contains(warmStickyClassName));
 
   const colorScheme = themeMode === "dark" ? "dark" : "light";
   htmlElement.style.colorScheme = colorScheme;
@@ -51,15 +64,15 @@ export function chooseGlobalStyles(themeMode: ThemeMode, warm: boolean) {
 export const globals = css`
   :global() {
     html:root {
-      ${defaultLightThemeStyles}
+      ${neutral.styles[0]}
       &.dark-theme {
-        ${defaultDarkThemeStyles}
+        ${neutral.styles[1]}
       }
 
       &.warm-palette {
-        ${warmLightThemeStyles}
+        ${warm.styles[0]}
         &.dark-theme {
-          ${warmDarkThemeStyles}
+          ${warm.styles[1]}
         }
       }
     }

package/src/themed-ink.tsx

@@ -0,0 +1,26 @@
+import {CSSProperties, ReactNode} from "react";
+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) => {
+  const theme = useTheme();
+  const dn = theme.fns.deneutralize;
+  return (
+    <Tag
+      style={{
+        ...style,
+        ...(fg && {color: dn(fg)}),
+        ...(bg && {backgroundColor: dn(bg)}),
+      }}
+      {...rest}
+    />
+  );
+};

package/src/toast/toast-action.tsx

@@ -1,7 +1,7 @@
 import {css} from "@linaria/core";
 import {Action as RadixToastAction, type ToastActionProps} from "@radix-ui/react-toast";
 import {ElementRef, forwardRef} from "react";
-import {ButtonProps, Button} from "../button/button";
+import {Button, ButtonProps} from "../button/button";
 import {space} from "../design-system";
 import {makeButtonColors} from "../button/make-button-colors";
 import {useTheme} from "../theme-provider";
@@ -19,7 +19,7 @@ export const ToastAction = forwardRef<
   ButtonProps & {altText: ToastActionProps["altText"]}
 >(({children, altText, ...props}, ref) => {
   const theme = useTheme();
-  const buttonColors = theme.mode === "dark" ? makeButtonColors(theme.textColor, "outline", theme) : {};
+  const buttonColors = theme.mode === "dark" ? makeButtonColors(theme.colors.textColor, "outline", theme) : {};
   return (
     <RadixToastAction className={toastActionCss} ref={ref} altText={altText} asChild>
       <Button style={buttonColors} variant="outline" color="neutral" {...props}>

package/src/toggle-button/round-toggle-button.tsx

@@ -1,10 +1,11 @@
 import {ComponentRef, forwardRef} from "react";
 import {ToggleButton, ToggleButtonProps} from "./toggle-button";
 import {css, cx} from "@linaria/core";
+import {border} from "../design-system";
 
 const roundToggleButtonCss = css`
   &:is(&) {
-    border-radius: 100%;
+    border-radius: ${border.radiusFull};
     width: 28px;
     height: 28px;
     padding: 0;

package/src/toggle-button/toggle-button.tsx

@@ -1,7 +1,7 @@
-import {css, cx} from "@linaria/core";
+import {css, cx, CSSProperties} from "@linaria/core";
 import {Toggle, ToggleProps} from "@radix-ui/react-toggle";
 import {forwardRef} from "react";
-import {border, space, textStyles, themeVars} from "../design-system";
+import {border, transitionDuration, space, textStyles, themeVars} from "../design-system";
 import {iconColorVar, iconSizeVar} from "../icons/Icon";
 
 export const toggleButtonCss = css`
@@ -16,17 +16,17 @@ export const toggleButtonCss = css`
   border-radius: ${border.radius8}px;
 
   transition-property: border, background-color, color, opacity, box-shadow;
-  transition-duration: 0.15s;
+  transition-duration: ${transitionDuration.fast};
 
-  color: ${themeVars.textColor};
-  ${iconColorVar}: ${themeVars.colorIconButtonGhostNeutral};
+  color: var(--fibery-toggle-button-default-text-color);
+  ${iconColorVar}: var(--fibery-toggle-button-default-icon-color);
 
-  border: 1.5px solid ${themeVars.colorBorderReactionsHover};
-  background-color: ${themeVars.colorBgReactionsDefault};
+  border: 1.5px solid var(--fibery-toggle-button-default-border-color);
+  background-color: var(--fibery-toggle-button-default-color);
 
   &[aria-readonly="true"] {
-    background-color: ${themeVars.colorBgReactionsHover};
-    border-color: ${themeVars.colorBgReactionsHover};
+    background-color: var(--fibery-toggle-button-default-hover-color);
+    border-color: var(--fibery-toggle-button-default-hover-color);
   }
 
   cursor: pointer;
@@ -59,19 +59,11 @@ export const toggleButtonCss = css`
   }
 
   &:not(:disabled, [aria-readonly="true"]) {
-    &:hover {
-      background-color: ${themeVars.colorBgReactionsHover};
-      border-color: ${themeVars.colorBorderReactionsHover};
-    }
-
+    &:hover,
     &:is(:active, [aria-expanded="true"]) {
-      background-color: ${themeVars.colorBgReactionsHover};
-      border-color: ${themeVars.colorBorderReactionsHover};
-
-      &:is([aria-pressed="true"], [aria-checked="true"]) {
-        background-color: ${themeVars.colorBgReactionsSelectedHover};
-        border-color: ${themeVars.colorBorderReactionsSelectedHover};
-      }
+      background-color: var(--fibery-toggle-button-default-hover-color);
+      border-color: var(--fibery-toggle-button-default-border-color);
+      color: var(--fibery-toggle-button-default-hover-text-color);
     }
   }
 
@@ -85,30 +77,27 @@ export const toggleButtonCss = css`
   }
 
   &:focus-visible {
-    background-color: ${themeVars.colorBgReactionsHover};
-    outline: 2px solid ${themeVars.colorBorderReactionsHover};
+    background-color: var(--fibery-toggle-button-default-hover-color);
+    outline: 2px solid var(--fibery-toggle-button-default-border-color);
   }
 
   &:is([aria-pressed="true"], [aria-checked="true"]) {
-    color: ${themeVars.colorTextReactionsSelected};
-    ${iconColorVar}: ${themeVars.colorIconButtonGhostAccent};
-    background-color: ${themeVars.colorBgReactionsSelectedDefault};
-    border-color: ${themeVars.colorBorderReactionsSelectedDefault};
+    color: var(--fibery-toggle-button-pressed-text-color);
+    ${iconColorVar}: var(--fibery-toggle-button-pressed-icon-color);
+    background-color: var(--fibery-toggle-button-pressed-color);
+    border-color: var(--fibery-toggle-button-pressed-border-color);
 
     &[aria-readonly="true"] {
-      background-color: ${themeVars.colorBgReactionsSelectedDefault};
-      border-color: ${themeVars.colorBgReactionsSelectedDefault};
+      background-color: var(--fibery-toggle-button-pressed-color);
+      border-color: var(--fibery-toggle-button-pressed-color);
     }
 
     &:not(:disabled, [aria-readonly="true"]) {
-      &:hover {
-        background-color: ${themeVars.colorBgReactionsSelectedHover};
-        border-color: ${themeVars.colorBorderReactionsSelectedHover};
-      }
-
-      &:active {
-        background-color: ${themeVars.colorBgReactionsSelectedDefault};
-        border-color: ${themeVars.colorBorderReactionsSelectedHover};
+      &:hover,
+      &:is(:active, [aria-expanded="true"]) {
+        background-color: var(--fibery-toggle-button-pressed-hover-color);
+        border-color: var(--fibery-toggle-button-pressed-hover-border-color);
+        color: var(--fibery-toggle-button-pressed-hover-text-color);
       }
     }
   }
@@ -125,7 +114,7 @@ export const toggleButtonContent = css`
   height: 100%;
 
   transition-property: opacity;
-  transition-duration: 0.15s;
+  transition-duration: ${transitionDuration.fast};
 
   .${toggleButtonCss}:is(:active, [aria-expanded="true"]) > & {
     opacity: 0.8;
@@ -138,6 +127,26 @@ export const toggleButtonContent = css`
   overflow: hidden;
 `;
 
+const getColors = (): CSSProperties => {
+  return {
+    "--fibery-toggle-button-default-color": themeVars.colorBgReactionsDefault,
+    "--fibery-toggle-button-default-text-color": themeVars.colorTextButtonGhostNeutral,
+    "--fibery-toggle-button-default-icon-color": themeVars.colorIconButtonGhostNeutral,
+    "--fibery-toggle-button-default-border-color": themeVars.colorBorderReactionsHover,
+    "--fibery-toggle-button-default-hover-color": themeVars.colorBgReactionsHover,
+    "--fibery-toggle-button-default-hover-text-color": themeVars.colorTextButtonGhostNeutral,
+    "--fibery-toggle-button-default-hover-border-color": themeVars.colorBorderReactionsHover,
+
+    "--fibery-toggle-button-pressed-color": themeVars.colorBgReactionsSelectedDefault,
+    "--fibery-toggle-button-pressed-text-color": themeVars.colorTextReactionsSelected,
+    "--fibery-toggle-button-pressed-icon-color": themeVars.colorIconButtonGhostAccent,
+    "--fibery-toggle-button-pressed-border-color": themeVars.colorBorderReactionsSelectedDefault,
+    "--fibery-toggle-button-pressed-hover-color": themeVars.colorBgReactionsSelectedHover,
+    "--fibery-toggle-button-pressed-hover-text-color": themeVars.colorTextReactionsSelected,
+    "--fibery-toggle-button-pressed-hover-border-color": themeVars.colorBorderReactionsSelectedHover,
+  };
+};
+
 export type ToggleButtonVariant = "outline";
 export type ToggleButtonSize = "small" | "medium" | "large";
 
@@ -156,14 +165,18 @@ export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
       size = "small",
       variant = "outline",
       children,
+      style,
       "aria-readonly": ariaReadonly,
       readOnly = ariaReadonly,
       ...props
     },
     ref
   ): JSX.Element => {
+    const colors = getColors();
+
     return (
       <Toggle
+        style={{...colors, ...style}}
         ref={ref}
         className={cx(toggleButtonCss, iconStart && toggleButtonCssWithIconStart, className)}
         data-variant={variant}

package/src/toggle-on-off.tsx

@@ -1,19 +1,19 @@
-import {FC, ComponentProps, useMemo} from "react";
+import {ComponentProps, FC, useMemo} from "react";
 import {isValidColor} from "./color-utils";
-import {ThemeColors} from "./design-system";
+import {Theme} from "./design-system";
 import {useTheme} from "./theme-provider";
 import {Toggle} from "./toggle";
 import {useIsPhone} from "./use-is-phone";
 
-const getBackgroundColors = (accentColor: string | undefined, theme: ThemeColors) => {
+const getBackgroundColors = (accentColor: string | undefined, theme: Theme) => {
   return accentColor && isValidColor(accentColor)
     ? {
         enabledColor: accentColor,
-        disabledColor: theme.colorBgButtonSoftNeutralHover,
+        disabledColor: theme.colors.colorBgButtonSoftNeutralHover,
       }
     : {
-        enabledColor: theme.colorBgButtonSolidAccentDefault,
-        disabledColor: theme.colorBgButtonSoftNeutralHover,
+        enabledColor: theme.colors.colorBgButtonSolidAccentDefault,
+        disabledColor: theme.colors.colorBgButtonSoftNeutralHover,
       };
 };
 
@@ -41,5 +41,5 @@ interface ReduxFormToggleOnOffProps extends ToggleOnOffProps {
 
 export const ReduxFormToggleOnOff: FC<ReduxFormToggleOnOffProps> = ({input, ...rest}) => {
   const theme = useTheme();
-  return <ToggleOnOff color={theme.primaryBlue} {...input} {...rest} />;
+  return <ToggleOnOff color={theme.colors.colorAccent} {...input} {...rest} />;
 };

package/src/tooltip-if-overflown.tsx

@@ -21,11 +21,11 @@ export const useTruncated = () => {
 };
 
 export const TooltipIfOverflown: React.FC<
-  Omit<TooltipProps, "children"> & {children: (args: {setNode: SetNode}) => JSX.Element | null}
-> = ({children, ...tooltipProps}) => {
+  Omit<TooltipProps, "children"> & {force?: boolean; children: (args: {setNode: SetNode}) => JSX.Element | null}
+> = ({force, children, ...tooltipProps}) => {
   const {truncated, setNode} = useTruncated();
   return (
-    <Tooltip {...tooltipProps} disabled={!truncated}>
+    <Tooltip {...tooltipProps} disabled={!truncated && !force}>
       {children({setNode})}
     </Tooltip>
   );

package/src/tree-utils.test.ts

@@ -0,0 +1,166 @@
+import {flattenTree, mutateTree, TreeData} from "./tree-utils";
+
+const makeTree = (): TreeData => ({
+  rootId: "root",
+  items: {
+    root: {id: "root", children: ["a", "b"]},
+    a: {id: "a", children: ["a1", "a2"], isExpanded: false},
+    a1: {id: "a1", children: []},
+    a2: {id: "a2", children: []},
+    b: {id: "b", children: [], isExpanded: false},
+  },
+});
+
+describe("flattenTree", () => {
+  it("returns empty array when rootId is missing from items", () => {
+    const tree: TreeData = {rootId: "missing", items: {}};
+    expect(flattenTree(tree)).toEqual([]);
+  });
+
+  it("returns top-level children with correct paths", () => {
+    const tree = makeTree();
+    const result = flattenTree(tree);
+
+    expect(result).toHaveLength(2);
+    expect(result[0].item.id).toBe("a");
+    expect(result[0].path).toEqual([0]);
+    expect(result[1].item.id).toBe("b");
+    expect(result[1].path).toEqual([1]);
+  });
+
+  it("does not include children of collapsed nodes", () => {
+    const tree = makeTree();
+    const result = flattenTree(tree);
+
+    const ids = result.map((r) => r.item.id);
+    expect(ids).not.toContain("a1");
+    expect(ids).not.toContain("a2");
+  });
+
+  it("includes children of expanded nodes", () => {
+    const tree = makeTree();
+    tree.items["a"] = {...tree.items["a"], isExpanded: true};
+
+    const result = flattenTree(tree);
+    const ids = result.map((r) => r.item.id);
+
+    expect(ids).toEqual(["a", "a1", "a2", "b"]);
+  });
+
+  it("assigns correct nested paths for expanded children", () => {
+    const tree = makeTree();
+    tree.items["a"] = {...tree.items["a"], isExpanded: true};
+
+    const result = flattenTree(tree);
+
+    expect(result[1].item.id).toBe("a1");
+    expect(result[1].path).toEqual([0, 0]);
+    expect(result[2].item.id).toBe("a2");
+    expect(result[2].path).toEqual([0, 1]);
+  });
+
+  it("handles multiple levels of expansion", () => {
+    const tree: TreeData = {
+      rootId: "root",
+      items: {
+        root: {id: "root", children: ["a"]},
+        a: {id: "a", children: ["a1"], isExpanded: true},
+        a1: {id: "a1", children: ["a1a"], isExpanded: true},
+        a1a: {id: "a1a", children: []},
+      },
+    };
+
+    const result = flattenTree(tree);
+    expect(result.map((r) => r.item.id)).toEqual(["a", "a1", "a1a"]);
+    expect(result[2].path).toEqual([0, 0, 0]);
+  });
+
+  it("returns empty array when root has no children", () => {
+    const tree: TreeData = {
+      rootId: "root",
+      items: {root: {id: "root", children: []}},
+    };
+    expect(flattenTree(tree)).toEqual([]);
+  });
+
+  it("preserves original path prefix when called with initial path", () => {
+    const tree: TreeData = {
+      rootId: "root",
+      items: {
+        root: {id: "root", children: ["a"]},
+        a: {id: "a", children: []},
+      },
+    };
+
+    const result = flattenTree(tree, [5, 3]);
+    expect(result[0].path).toEqual([5, 3, 0]);
+  });
+});
+
+describe("mutateTree", () => {
+  it("returns the same tree reference when itemId is not found", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "nonexistent", {isExpanded: true});
+    expect(result).toBe(tree);
+  });
+
+  it("preserves rootId", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "a", {isExpanded: true});
+    expect(result.rootId).toBe(tree.rootId);
+  });
+
+  it("applies mutation to the target item", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "a", {isExpanded: true});
+    expect(result.items["a"].isExpanded).toBe(true);
+  });
+
+  it("does not mutate the original tree", () => {
+    const tree = makeTree();
+    mutateTree(tree, "a", {isExpanded: true});
+    expect(tree.items["a"].isExpanded).toBe(false);
+  });
+
+  it("does not change other items references", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "a", {isExpanded: true});
+    expect(result.items["b"]).toBe(tree.items["b"]);
+    expect(result.items["a1"]).toBe(tree.items["a1"]);
+  });
+
+  it("merges partial mutation fields", () => {
+    const tree = makeTree();
+    tree.items["a"] = {...tree.items["a"], hasChildren: true, isExpanded: false};
+
+    const result = mutateTree(tree, "a", {isExpanded: true});
+    expect(result.items["a"].hasChildren).toBe(true);
+    expect(result.items["a"].isExpanded).toBe(true);
+    expect(result.items["a"].children).toEqual(["a1", "a2"]);
+  });
+
+  it("can update children array", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "b", {children: ["new-child"]});
+    expect(result.items["b"].children).toEqual(["new-child"]);
+  });
+
+  it("can update data field", () => {
+    const tree = makeTree();
+    const data = {name: "Node A"};
+    const result = mutateTree(tree, "a", {data});
+    expect(result.items["a"].data).toBe(data);
+  });
+
+  it("returns a new items object reference", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "a", {isExpanded: true});
+    expect(result.items).not.toBe(tree.items);
+  });
+
+  it("returns a new item object reference for the mutated item", () => {
+    const tree = makeTree();
+    const result = mutateTree(tree, "a", {isExpanded: true});
+    expect(result.items["a"]).not.toBe(tree.items["a"]);
+  });
+});

package/src/tree-utils.ts

@@ -0,0 +1,107 @@
+import {$TSFixMe} from "./tsfixme";
+
+export type ItemId = string | number;
+export interface TreeData {
+  rootId: ItemId;
+  items: Record<ItemId, TreeItem>;
+}
+
+export type TreeItemData = $TSFixMe;
+export type TreeItem = {
+  id: ItemId;
+  children: ItemId[];
+  hasChildren?: boolean;
+  isExpanded?: boolean;
+  isChildrenLoading?: boolean;
+  data?: TreeItemData;
+};
+export type FlattenedTree = FlattenedItem[];
+export type Path = number[];
+export type FlattenedItem = {
+  item: TreeItem;
+  path: Path;
+};
+export type TreeSourcePosition = {
+  parentId: ItemId;
+  index: number;
+};
+export type TreeDestinationPosition = {
+  parentId: ItemId;
+  index?: number;
+};
+
+export type TreeItemMutation = {
+  id?: ItemId;
+  children?: ItemId[];
+  hasChildren?: boolean;
+  isExpanded?: boolean;
+  isChildrenLoading?: boolean;
+  data?: TreeItemData;
+};
+
+/*
+  Transforms tree structure into flat list of items for rendering purposes.
+  We recursively go through all the elements and its children first on each level
+ */
+export const flattenTree = (tree: TreeData, path: Path = []): FlattenedTree =>
+  tree.items[tree.rootId]
+    ? tree.items[tree.rootId].children.reduce<FlattenedTree>((accum, itemId, index) => {
+        // iterating through all the children on the given level
+        const item = tree.items[itemId];
+        const currentPath = [...path, index]; // we create a flattened item for the current item
+
+        const currentItem = createFlattenedItem(item, currentPath); // we flatten its children
+
+        const children = flattenChildren(tree, item, currentPath); // append to the accumulator
+
+        return [...accum, currentItem, ...children];
+      }, [])
+    : [];
+/*
+  Constructs a new FlattenedItem
+ */
+
+const createFlattenedItem = (item: TreeItem, currentPath: Path) => {
+  return {
+    item,
+    path: currentPath,
+  };
+};
+/*
+  Flatten the children of the given subtree
+*/
+
+const flattenChildren = (tree: TreeData, item: TreeItem, currentPath: Path) => {
+  return item.isExpanded
+    ? flattenTree(
+        {
+          rootId: item.id,
+          items: tree.items,
+        },
+        currentPath
+      )
+    : [];
+};
+/*
+  Changes the tree data structure with minimal reference changes.
+ */
+
+export const mutateTree = (tree: TreeData, itemId: ItemId, mutation: TreeItemMutation) => {
+  const itemToChange = tree.items[itemId];
+
+  if (!itemToChange) {
+    // Item not found
+    return tree;
+  } // Returning a clone of the tree structure and overwriting the field coming in mutation
+
+  return {
+    // rootId should not change
+    rootId: tree.rootId,
+    items: {
+      // copy all old items
+      ...tree.items,
+      // overwriting only the item being changed
+      [itemId]: {...itemToChange, ...mutation},
+    },
+  };
+};

package/src/type-badge-box.tsx

@@ -1,6 +1,6 @@
 import {makeAbbreviation} from "./type-badge";
 import {css, cx} from "@linaria/core";
-import {space} from "./design-system";
+import {space, themeVars} from "./design-system";
 import {ReactNode} from "react";
 
 type Props = {
@@ -32,7 +32,7 @@ export const TypeBadgeBox = ({width, height, typeObject, children, className}: P
         abbr.length > 1 &&
           css`
             & > div {
-              mask-image: linear-gradient(90deg, #000 60%, rgba(0, 0, 0, 0.4));
+              mask-image: linear-gradient(90deg, ${themeVars.whiteA100} 60%, ${themeVars.whiteA40});
             }
           `,
         className