@fibery/ui-kit 1.36.2 → 1.38.0

package/src/design-system.ts

@@ -27,6 +27,7 @@ export const typeSizes = [30, 24, 18, 16, 14, 12, 10, 8] as const;
 export const fontWeight = {
   light: 310, // 300 basic, 310 experiment with a variable Inter
   regular: 410, // 400 basic, 410 experiment with a variable Inter
+  mediumLight: 450,
   medium: 500,
   semibold: 600,
   bold: 700,
@@ -129,7 +130,7 @@ const stateColors = {
 const brandColors = {
   red: "#FF5400",
   green: "#08BD9F",
-  blue: "#4568FB",
+  blue: "#4978D4",
 } as const;
 
 export const getDarkenColor = _.memoize((color: string): string => {
@@ -141,58 +142,55 @@ export const themeColors = {
   brandColors: [brandColors, brandColors],
   stateColors: [stateColors, stateColors],
   colorAI: ["hsla(271, 57%, 61%, 1)", "hsla(272, 43%, 50%, 1)"],
-  colorBgAI: ["hsla(271, 57%, 61%, 0.1)", "hsla(272, 43%, 50%, 0.1)"],
+  colorBgAI: ["hsla(271, 57%, 61%, 0.09)", "hsla(272, 43%, 50%, 0.2)"],
   colorSubtleBgAI: ["hsla(271, 57%, 61%, 0.05)", "hsla(272, 43%, 50%, 0.1)"],
 
+  // Elevations
+  surfaceElevationS: [`0 2px 4px 0 ${blackA.blackA3}`, `0 2px 4px 0 ${whiteA.whiteA3}`],
+  surfaceElevationM: [`0 4px 8px 0 ${blackA.blackA5}`, `0 4px 8px 0 ${whiteA.whiteA5}`],
+  surfaceElevationL: [`0 8px 12px 0 ${blackA.blackA5}`, `0 8px 12px 0 ${whiteA.whiteA5}`],
+
   // Shadows and effects / Elevation
   shadow50: [
-    `
-    0px 0px 0px 0.5px ${getOpacities(slate.slate12).opacity5}
-    `,
-    `0px 0px 0px 0.5px ${getOpacities(slateDark.slate12).opacity15}`,
+    `0px 0px 0px 1px ${getOpacities(slate.slate12).opacity5}`,
+    `0px 0px 0px 1px ${getOpacities(slateDark.slate12).opacity10}`,
   ],
   shadow100: [
-    `
-    0px 1px 4px 0px ${getOpacities(slate.slate12).opacity5}
-    `,
+    `0px 1px 4px 0px ${getOpacities(slate.slate12).opacity5}`,
     `0px 1px 4px 0px ${getOpacities(slate.slate12).opacity10}`,
   ],
   shadow200: [
-    `
-    0px 2px 6px 0px ${getOpacities(slate.slate12).opacity5}
-    `,
+    `0px 2px 6px 0px ${getOpacities(slate.slate12).opacity5}`,
     `0px 2px 6px 0px ${getOpacities(slate.slate12).opacity10}`,
   ],
   shadow300: [
-    `
-    0px 3px 6px -3px ${getOpacities(slate.slate12).opacity10}, 0px 8px 20px -4px ${
+    `0px 3px 6px -3px ${getOpacities(slate.slate12).opacity10}, 0px 8px 20px -4px ${
       getOpacities(slate.slate12).opacity15
-    }
-    `,
+    }`,
     `0px 3px 6px -3px ${getOpacities(slate.slate12).opacity10}, 0px 8px 20px -4px ${
       getOpacities(slate.slate12).opacity15
     }`,
   ],
   shadow400: [
-    `
-    0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 16px 40px 0px ${getOpacities(slate.slate12).opacity15}
-    `,
+    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 16px 40px 0px ${
+      getOpacities(slate.slate12).opacity15
+    }`,
     `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 16px 40px 0px ${
       getOpacities(slate.slate12).opacity15
     }`,
   ],
   shadow500: [
-    `
-    0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 20px 50px 0px ${getOpacities(slate.slate12).opacity15}
-    `,
+    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 20px 50px 0px ${
+      getOpacities(slate.slate12).opacity15
+    }`,
     `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 20px 50px 0px ${
       getOpacities(slate.slate12).opacity15
     }`,
   ],
   shadow600: [
-    `
-    0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 26px 80px 0px ${getOpacities(slate.slate12).opacity20}
-    `,
+    `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 26px 80px 0px ${
+      getOpacities(slate.slate12).opacity20
+    }`,
     `0px 0px 1px 0px ${getOpacities(slate.slate12).opacity20}, 0px 26px 80px 0px ${
       getOpacities(slate.slate12).opacity20
     }`,
@@ -213,10 +211,6 @@ export const themeColors = {
       getOpacities(slateDark.slate1).opacity5
     }, 0px 10px 26px 0px ${getOpacities(slateDark.slate1).opacity15}`,
   ],
-  shadowModal: [
-    `${getOpacities(slate.slate10).opacity20} 0px 16px 70px`,
-    `${getOpacities(slateDark.slate1).opacity40} 0px 16px 70px`,
-  ],
   shadowSidebar: [
     `-3px 0px 10px 0px ${getOpacities(slate.slate10).opacity10}`,
     `-3px 0px 10px 0px ${getOpacities(slateDark.slate1).opacity80}`,
@@ -237,7 +231,9 @@ export const themeColors = {
   mainBg: [slate.slate3, slateDark.slateBase],
   panelBg: [whiteA.whiteA0, slateDark.slate1],
   panelContentBg: [slate.slate2, slateDark.slate1],
+  panelContentBgOpacity80: [getOpacities(slate.slate2).opacity80, getOpacities(slateDark.slate1).opacity80],
   colorBgRelationContainer: [slate.slate2, slateDark.slate1],
+  colorBgAISidebarContent: [slate.slate1, slateDark.slate1],
   pageBg: [whiteA.whiteA0, slateDark.slate1],
   pageContentBg: [whiteA.whiteA0, slateDark.slate2],
   colorBgPopup: [whiteA.whiteA0, slateDark.slate4],
@@ -248,7 +244,7 @@ export const themeColors = {
   menuSelectedTextColor: [slate.slate2, slate.slate2],
   menuFooterColor: [getOpacities(whiteA.whiteA0).opacity20, getOpacities(slateDark.slate3).opacity40],
   menuFooterHoverColor: [getOpacities(whiteA.whiteA0).opacity60, slateDark.slate4],
-  menuIconColor: [getOpacities(slate.slate11).opacity90, getOpacities(slateDark.slate11).opacity90],
+  menuIconColor: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity70],
   menuSelectedIconColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate1).opacity90],
   textColor: [slateDark.slate5, slate.slate6],
   textSelectionColor: [getOpacities(blue.blue10).opacity20, getOpacities(blueDark.blue10).opacity40],
@@ -269,6 +265,8 @@ export const themeColors = {
   codeColor: [red.red9, red.red8],
   codeBgColor: [slate.slate3, slateDark.slate4],
   codeBlockBgColor: [slate.slate3, slateDark.slate4],
+  addedDiffTextColor: [teal.teal9, tealDark.teal11],
+  removedDiffTextColor: [red.red11, redDark.red11],
 
   // Entity
   entityNodeColor: [slateDark.slate3, slate.slate8],
@@ -284,8 +282,8 @@ export const themeColors = {
   entityNodeBgColor: [slate.slate2, slateDark.slate3],
   shortcutTextColor: [slate.slate9, slateDark.slate11],
   shortcutBorderColor: [
-    `0.5px solid ${getOpacities(slate.slate8).opacity50}`,
-    `0.5px solid ${getOpacities(slateDark.slate10).opacity20}`,
+    `1px solid ${getOpacities(slate.slate8).opacity50}`,
+    `1px solid ${getOpacities(slateDark.slate10).opacity20}`,
   ],
 
   // Input
@@ -326,7 +324,7 @@ export const themeColors = {
   buttonPrimaryColor: [indigo.indigo9, indigoDark.indigo9],
   buttonColor: [slate.slate10, slateDark.slate10],
   buttonPrimaryTextColor: [slate.slate2, slate.slate6],
-  checkboxColor: [slate.slate11, slateDark.slate11],
+  checkboxColor: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity70],
   colorBorderBlockQuote: [slate.slate11, slateDark.slate11],
 
   // Actions menu
@@ -356,8 +354,9 @@ export const themeColors = {
   ],
   actionMenuSeparatorColor: [getOpacities(blackA.blackA0).opacity10, getOpacities(whiteA.whiteA0).opacity15],
   separatorColor: [getOpacities(blackA.blackA0).opacity10, getOpacities(whiteA.whiteA0).opacity10],
+  separatorColorDimmed: [getOpacities(blackA.blackA0).opacity5, getOpacities(whiteA.whiteA0).opacity5],
   separatorBreadcrumbsColor: [slate.slate8, slateDark.slate8],
-  iconColor: [slate.slate10, slateDark.slate10],
+  iconColor: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity70],
   appIconColor: [getOpacities(slate.slate2).opacity90, getOpacities(slate.slate2).opacity70],
   appIconBgColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate2).opacity50],
   mentionBgColor: [getOpacities(slate.slate7).opacity30, getOpacities(slateDark.slate7).opacity40],
@@ -458,7 +457,7 @@ export const themeColors = {
     `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${getOpacities(slate.slate10).opacity20}`,
     `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${getOpacities(slateDark.slate2).opacity20}`,
   ],
-
+  colorBgSegmentedControl: [getOpacities(slate.slate5).opacity80, getOpacities(slateDark.slate3).opacity80],
   colorBgMenuHeaderAvatar: [whiteA.whiteA0, slateDark.slate2],
   shadowMenuHeaderAvatar: [
     `0px 1px 4px ${getOpacities(slate.slate11).opacity10}, 0 0 0 0.5px ${getOpacities(slate.slate5).opacity50}`,
@@ -476,16 +475,16 @@ export const themeColors = {
   // :focus
   colorBgMenuItemFocus: [slate.slate6, slateDark.slate5],
   // Selected
-  colorBgMenuItemSelected: [indigo.indigo5, indigoDark.indigo3],
+  colorBgMenuItemSelected: [getOpacities(indigo.indigo5).opacity80, indigoDark.indigo3],
   // :hover
-  colorBgMenuItemSelectedHover: [indigo.indigo6, indigoDark.indigo5],
+  colorBgMenuItemSelectedHover: [getOpacities(indigo.indigo6).opacity70, indigoDark.indigo5],
   // :focus, :focus:hover
   colorBgPinnedFieldsLabel: [slate.slate11, slateDark.slate11],
   colorBgObjectEditorSeparator: [slate.slate12, slateDark.slate12],
   colorBgMenuItemSelectedFocused: [indigo.indigo6, indigoDark.indigo5],
   colorBgFieldEditorContainer: [slate.slate2, slateDark.slate3],
   colorBgFieldEditorLinkEqualSign: [slate.slate6, slateDark.slate2],
-  allowedDropColor: [getOpacities(slate.slate3).opacity80, getOpacities(slateDark.slate3).opacity80],
+  allowedDropColor: [slate.slate4, slateDark.slate4],
   relationViewBgColor: [slate.slate2, slateDark.slate3],
 
   mySpaceIconColor: [swatches["gray-light"], swatches["gray-light"]],
@@ -500,7 +499,7 @@ export const themeColors = {
   unitBgHover: [slate.slate4, slateDark.slate7],
 
   // Badges
-  colorBgBadgeNeutral: [getOpacities(indigo.indigo4).opacity90, getOpacities(indigoDark.indigo4).opacity80],
+  colorBgBadgeNeutral: [getOpacities(indigo.indigo5).opacity70, getOpacities(indigoDark.indigo4).opacity80],
   colorBgBadgeSuccess: [teal.teal5, tealDark.teal5],
   colorBgBadgeWarning: [yellow.yellow5, yellowDark.yellow5],
   colorBgBadgeError: [red.red5, redDark.red5],
@@ -532,8 +531,8 @@ export const themeColors = {
   appCardHoverColor: [getOpacities(slate.slate1).opacity95, slateDark.slate2],
   modalBg: [getOpacities(slate.slate11).opacity20, getOpacities(slateDark.slate2).opacity50],
   modalContentBg: [whiteA.whiteA0, slateDark.slate3],
-  progressIconBg: [getOpacities(slate.slate8).opacity50, getOpacities(slateDark.slate10).opacity20],
-  progressIconFill: [slate.slate11, slateDark.slate11],
+  progressIconBg: [blackA.blackA7, whiteA.whiteA7],
+  progressIconFill: [blackA.blackA11, whiteA.whiteA11],
   selectedColorBorder: [getOpacities(slate.slate6).opacity25, getOpacities(slate.slate6).opacity25],
   formBg: [slate.slate2, slateDark.slate2],
   formHeaderShadow: [
@@ -573,6 +572,14 @@ export const themeColors = {
   colorBorderRichTextMedia: [blackA.blackA7, blackA.blackA7],
   richTextTableBorder: [blackA.blackA5, whiteA.whiteA7],
 
+  // Drag and drop
+  colorBgDropLine: [indigo.indigo8, indigoDark.indigo8],
+
+  // Board
+  boardBg: [slate.slate1, slateDark.slate1],
+  boardBgWithOpacity80: [getOpacities(slate.slate1).opacity80, getOpacities(slateDark.slate1).opacity80],
+  boardAxisBgHover: [slate.slate4, slateDark.slate4],
+
   // Grid
   gridHeaderBgColor: [slate.slate2, slateDark.slate3],
   gridHeaderHoverBgColor: [slate.slate3, slateDark.slate4],
@@ -594,7 +601,8 @@ export const themeColors = {
   timelineDependencyOverlapHoverBgColor: [red.red11, redDark.red11],
   timelineCellBgColor: [slate.slate1, slateDark.slate1],
   timelineCellWeekendBgColor: [slate.slate2, slateDark.slate2],
-  timelineCellTodayBgColor: [indigo.indigo2, indigoDark.indigo2],
+  timelineCellTodayBgColor: [indigo.indigo4, indigoDark.indigo2],
+  timelineCreateEntityPlaceholderBgColor: [getOpacities(slate.slate11).opacity20, slateDark.slate7],
 
   // #region buttons
   // solid
@@ -685,8 +693,8 @@ export const themeColors = {
   colorBorderNeutralFocusRing: [getOpacities(slate.slate9).opacity30, getOpacities(slate.slate9).opacity30],
   colorBorderDestructiveFocusRing: [getOpacities(red.red9).opacity30, getOpacities(red.red9).opacity30],
 
-  colorBgReactionsDefault: [slate.slate3, slateDark.slate6],
-  colorBgReactionsHover: [whiteA.whiteA0, slateDark.slate2],
+  colorBgReactionsDefault: [whiteA.whiteA0, slateDark.slate2],
+  colorBgReactionsHover: [slate.slate3, slateDark.slate6],
   colorBorderReactionsHover: [slate.slate8, slateDark.slate9],
   colorBgReactionsSelectedDefault: [indigo.indigo3, indigoDark.indigo8],
   colorBorderReactionsSelectedDefault: [indigo.indigo8, indigoDark.indigo8],
@@ -699,7 +707,7 @@ export const themeColors = {
   colorBgTabHover: [getOpacities(slate.slate11).opacity10, getOpacities(slateDark.slate11).opacity10],
 
   // Chat
-  colorBgMessageContainer: [slate.slate3, slateDark.slate6],
+  colorBgMessageContainer: [blackA.blackA3, slateDark.slate6],
   colorBgMessageContainerHover: [slate.slate2, slateDark.slate3],
   colorBgEntityAvatarDefault: [indigo.indigo1, indigoDark.indigo1],
   colorBgEntityAvatarHover: [indigo.indigo3, indigoDark.indigo3],
@@ -707,7 +715,7 @@ export const themeColors = {
   colorTextEntityAvatarHover: [indigo.indigo9, indigoDark.indigo9],
 
   // Text editor
-  colorBgEditorImageZoomed: [getOpacities(slate.slate3).opacity90, getOpacities(slateDark.slate6).opacity90],
+  colorBgEditorImageZoomed: [slate.slate3, slateDark.slate6],
 
   //Whiteboard
   instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity100, getOpacities(slateDark.slate4).opacity100],
@@ -808,15 +816,12 @@ function getTypeColors(themeColor: string, theme: ThemeMode) {
   } catch (e) {
     color = brandColors.green;
   }
-  const boardBg = chroma(color).luminance(0.85).desaturate(0.2).set("hsl.h", "+2");
 
   const lightTypeColors = {
     primary: color,
     opacity: getOpacities(color),
     darkenPrimary: getDarkenColor(color),
     brightenPrimary: chroma(color).luminance(0.92).desaturate(0.1).alpha(0.98).css(),
-    boardBg: boardBg.hex(),
-    boardBgOverlay: boardBg.alpha(0.8).css(),
     headerBg: chroma(color).luminance(0.7).desaturate(0.5).set("hsl.h", "+2").css(),
     detailsBg: chroma(color).alpha(0.5).luminance(0.85).hex(),
     focus: chroma(color).alpha(0.25).css(),
@@ -828,8 +833,6 @@ function getTypeColors(themeColor: string, theme: ThemeMode) {
     opacity: getOpacities(color),
     darkenPrimary: getDarkenColor(color),
     brightenPrimary: chroma(color).luminance(0.92).desaturate(0.1).alpha(0.98).css(),
-    boardBg: boardBg.hex(),
-    boardBgOverlay: boardBg.alpha(0.8).css(),
     headerBg: chroma(color).luminance(0.7).desaturate(0.5).set("hsl.h", "+2").css(),
     detailsBg: chroma(color).alpha(0.03).luminance(0.8).desaturate(0.8).darken(0.1).hex(),
     focus: chroma(color).alpha(0.25).css(),
@@ -912,6 +915,10 @@ export const getEnumBackgroundColor = _.memoize(
   (themeMode, color) => `${themeMode}-${color}`
 );
 
+export const getEnumTextColor = (color: string) => {
+  return `color-mix(in srgb, ${color} 25%, ${themeVars.textColor} 75%)`;
+};
+
 // TODO: fix color for light2. It should same as 'dark' only on dark menu but same as 'light' on other parts of application
 export const getAppIconBackgroundColor = (mode: ThemeMode, color: string) =>
   getThemeValue(mode, {
@@ -948,6 +955,7 @@ export const space = {
   s2: 2,
   s3: 3,
   s4: 4,
+  s5: 5,
   s6: 6,
   s8: 8,
   s10: 10,
@@ -976,6 +984,8 @@ export const spaceNestedTreeInterval = 0;
 export const layout = {
   logoSize: 18,
   menuDefaultWidth: 243,
+  fiberyAiSidebarDefaultWidth: 420,
+  fiberyAiSidebarMaxWidth: 920,
   desktopToolbarHeight: 32,
   desktopMenuMinWidth: 240,
   collapsedMenuMinWidth: 47,
@@ -985,13 +995,17 @@ export const layout = {
   menuGroupHeaderIndent: 28, // I'm ok
   menuItemLevelIndent: 24,
   listItemHeight: 38,
+  mobileListItemHeight: 44,
   itemHeight: 36,
   itemWithSubtitleHeight: 52,
   groupTitleHeight: 30,
   enumItemHeight: 32,
   menuItemHeight: 32,
+  mobileMenuItemHeight: 44,
   newMenuItemHeight: 28, // I'm ok
+  mobileSidebarMenuItemHeight: 44,
   newMenuIconSize: 18,
+  mobileSidebarIconSize: 20,
   viewHeaderHeight: space.s12 * 7,
   viewHeaderCompactHeight: 52,
   columnMinWidth: 240,
@@ -1019,6 +1033,18 @@ export const layout = {
   unitHeight: 18,
 } as const;
 
+export const menuItemHeightVar = `--${varPrefix}-layout-menuItemHeight`;
+export const sidebarMenuItemHeightVar = `--${varPrefix}-layout-sidebarMenuItemHeight`;
+export const sidebarMenuIconSizeVar = `--${varPrefix}-layout-sidebarMenuIconSize`;
+export const listRowSurfaceFontSizeVar = `--${varPrefix}-layout-listRowSurfaceFontSize`;
+
+export const layoutVars = {
+  menuItemHeight: `var(${menuItemHeightVar})`,
+  sidebarMenuItemHeight: `var(${sidebarMenuItemHeightVar})`,
+  sidebarMenuIconSize: `var(${sidebarMenuIconSizeVar})`,
+  listRowSurfaceFontSize: `var(${listRowSurfaceFontSizeVar})`,
+};
+
 export const border = {
   radius0: 0,
   radius1: 1,
@@ -1197,6 +1223,13 @@ export const textStyles = {
     fontWeight: fontWeight.regular,
     color: themeVars.textColor,
   },
+  heading8: {
+    fontFamily,
+    fontSize: typeSizes[6],
+    lineHeight: lineHeight.heading,
+    fontWeight: fontWeight.medium,
+    color: themeVars.textColor,
+  },
   big: {
     fontFamily,
     fontSize: typeSizes[3],
@@ -1268,4 +1301,11 @@ export const textStyles = {
       fontFeatureSettings: '"tnum" 0',
     },
   },
+  inherit: {
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    lineHeight: "inherit",
+    fontWeight: "inherit",
+    color: "inherit",
+  },
 } as const;

package/src/dropdown-menu/index.tsx

@@ -4,6 +4,7 @@ import {styled} from "@linaria/react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import {forwardRef} from "react";
 import {border, layout, space, textStyles, themeVars} from "../design-system";
+import {mobileRootSelector} from "../mobile-styles";
 
 export const Root = (dropdownMenuProps: DropdownMenuPrimitive.DropdownMenuProps) => (
   <DropdownMenuPrimitive.Root dir="ltr" modal={false} {...dropdownMenuProps} />
@@ -22,7 +23,7 @@ const rowItemStyles = {
   margin: `0px ${space.s4}px`,
   cursor: "pointer",
 
-  "&:hover,&[data-highlighted]": {
+  '&:hover,&[data-highlighted],&[aria-expanded="true"]': {
     marginLeft: 4,
     marginRight: 4,
     backgroundColor: themeVars.colorBgActionsMenuItemHover,
@@ -37,6 +38,12 @@ const rowItemStyles = {
       backgroundColor: "unset",
     },
   },
+
+  [`${mobileRootSelector} &`]: {
+    ...textStyles.big,
+    minHeight: layout.mobileMenuItemHeight,
+    padding: `0px ${space.s12}px`,
+  },
 };
 
 const dropdownMenuContentStyles = css`

package/src/emoji-picker/app-icon-picker.tsx

@@ -12,6 +12,7 @@ const i18n = {search: "Search icon...", notfound: "No Icons Found"};
 
 export type AppIconPickerProps = {
   color?: string;
+  emojiSize?: number;
   getHoverColor?: (color: string) => string | undefined;
   colors?: string[];
   onColorSelect?: (c: $TSFixMe) => void;
@@ -27,6 +28,7 @@ export const AppIconPicker: React.FC<AppIconPickerProps> = ({
   onColorSelect,
   getHoverColor,
   autoFocus = true,
+  emojiSize = 20,
 }) => {
   const themeMode = useThemeMode();
 
@@ -35,8 +37,8 @@ export const AppIconPicker: React.FC<AppIconPickerProps> = ({
       <svg
         style={{
           display: "block",
-          width: 20,
-          height: 20,
+          width: emojiSize,
+          height: emojiSize,
           fill: color ? getIconColor(themeMode, color) : undefined,
         }}
         viewBox="0 0 24 24"
@@ -44,12 +46,12 @@ export const AppIconPicker: React.FC<AppIconPickerProps> = ({
         <use href={(emoji as CustomEmoji).imageUrl} />
       </svg>
     ),
-    [color, themeMode]
+    [color, themeMode, emojiSize]
   );
 
   return (
     <EmojiPickerRoot i18n={i18n} onEmojiSelect={onSelect}>
-      <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={20}>
+      <EmojiPickerContent emojiHoverColor={color ? getHoverColor?.(color) : undefined} emojiSize={emojiSize}>
         <LazyIconDataStore fallback={<div style={{height: "302px"}}></div>}>
           <EmojiPickerContentWithColor
             color={color}

package/src/emoji-picker/emoji-picker-content-with-color.tsx

@@ -1,17 +1,15 @@
 import {css} from "@linaria/core";
 import {useRef, useState} from "react";
-import {IconButton} from "../button/icon-button";
 import {CollapsibleContent, CollapsibleRoot, CollapsibleTrigger} from "../collapsible";
 import {ColorPicker} from "../color-picker";
-import {getIconColor, space} from "../design-system";
-import ColorCoding from "../icons/react/ColorCoding";
-import ColorCodingFilled from "../icons/react/ColorCodingFilled";
+import {getIconColor, space, themeVars} from "../design-system";
 import {useThemeMode} from "../theme-provider";
 import {Tooltip} from "../tooltip";
 import {$TSFixMe} from "../tsfixme";
 import {EmojiPickerGrid, type EmojiPickerGridHandle, EmojiPickerGridProps} from "./primitives/grid";
 import {EmojiPickerHeader} from "./primitives/header";
 import {EmojiPickerSearch} from "./primitives/search";
+import {Swatch} from "../color-picker/swatch";
 
 const colorPickerWrapperCss = css`
   padding-top: ${space.s12}px;
@@ -23,16 +21,12 @@ const ColorPickerCollapsibleTrigger: React.FC<ColorPickerCollapsibleTrigger> = (
   const themeMode = useThemeMode();
   const iconColor = color ? getIconColor(themeMode, color) : undefined;
 
-  const Icon = opened ? ColorCoding : ColorCodingFilled;
-
   const label = opened ? "Hide color picker" : "Show color picker";
 
   return (
     <CollapsibleTrigger asChild>
       <Tooltip title={label}>
-        <IconButton data-testid="emoji-picker-color-trigger" size="small">
-          <Icon color={iconColor} />
-        </IconButton>
+        <Swatch data-testid="emoji-picker-color-trigger" size="small" color={iconColor || themeVars.iconColor} />
       </Tooltip>
     </CollapsibleTrigger>
   );

package/src/emoji-picker/emoji-picker-preview-footer.tsx

@@ -70,7 +70,7 @@ export const EmojiPickerPreviewFooter: React.FC<{
       {emojiPreview ? (
         <EmojiPreview emoji={emojiPreview.emoji} />
       ) : onAddCustomEmoji ? (
-        <Button variant="outline" color="neutral" size="small" onClick={onAddCustomEmoji}>
+        <Button variant="outline" color="neutral" size="small" supportMobile onClick={onAddCustomEmoji}>
           Add Emoji
         </Button>
       ) : null}

package/src/emoji-picker/emoji-picker.tsx

@@ -19,6 +19,7 @@ export type EmojiPickerProps = {
   onSelect: (emoji: EmojiItem) => void;
   showSkinTones?: boolean;
   searchRef?: React.RefObject<HTMLInputElement>;
+  searchAutofocus?: boolean;
 };
 export const EmojiPicker: React.FC<EmojiPickerProps> = ({
   onSelect,
@@ -30,6 +31,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({
   getHoverColor,
   showSkinTones,
   searchRef,
+  searchAutofocus,
   emojiSize = 20,
 }) => {
   const showFooter = Boolean(onAddCustomEmoji) || showSkinTones;
@@ -43,6 +45,7 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({
           getHoverColor={getHoverColor}
           onColorSelect={onColorSelect}
           searchRef={searchRef}
+          searchAutofocus={searchAutofocus}
         />
 
         {showFooter ? (

package/src/emoji-picker/emoji.tsx

@@ -1,8 +1,9 @@
+import {isAndroid} from "../is-android";
 import {Emoji as EmojiPrimitive, EmojiProps as EmojiPrimitiveProps} from "./primitives/emoji";
 import {isApple} from "./utils/emoji-set";
 import {detectEmojiSupportLevel} from "./utils/emoji-support";
 
 export type EmojiProps = EmojiPrimitiveProps;
 export const Emoji: React.FC<EmojiPrimitiveProps> = (props) => {
-  return <EmojiPrimitive version={detectEmojiSupportLevel()} native={isApple()} {...props} />;
+  return <EmojiPrimitive version={detectEmojiSupportLevel()} native={isApple() || isAndroid()} {...props} />;
 };