@fibery/ui-kit 1.37.0 → 1.38.1

package/src/design-system.ts

@@ -33,6 +33,22 @@ export const fontWeight = {
   bold: 700,
 } as const;
 
+// 300 basic, 310 experiment with a variable Inter
+export const fontSize = {
+  xxl: 30,
+  xl: 24,
+  lg: 18,
+  md: 16,
+  sm: 15,
+  xs: 14,
+  xxs: 13,
+  xxxs: 12,
+  tiny: 11,
+  mini: 10,
+  micro: 9,
+  nano: 8,
+} as const;
+
 const transparent = "rgba(255, 255, 255, 0)";
 
 export const minPanelWidth = 490;
@@ -152,8 +168,8 @@ export const themeColors = {
 
   // 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}`,
@@ -231,7 +247,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],
@@ -244,6 +262,8 @@ export const themeColors = {
   menuFooterHoverColor: [getOpacities(whiteA.whiteA0).opacity60, slateDark.slate4],
   menuIconColor: [getOpacities(slate.slate12).opacity70, getOpacities(slateDark.slate12).opacity70],
   menuSelectedIconColor: [getOpacities(slate.slate1).opacity90, getOpacities(slate.slate1).opacity90],
+
+  // Text, links colors
   textColor: [slateDark.slate5, slate.slate6],
   textSelectionColor: [getOpacities(blue.blue10).opacity20, getOpacities(blueDark.blue10).opacity40],
   accentTextColor: [slate.slate10, slateDark.slate10],
@@ -263,6 +283,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],
@@ -480,7 +502,7 @@ export const themeColors = {
   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"]],
@@ -569,7 +591,17 @@ export const themeColors = {
   richTextTableBorder: [blackA.blackA5, whiteA.whiteA7],
 
   // Drag and drop
-  colorBgDropLine: [indigo.indigo7, indigoDark.indigo7],
+  colorBgDropLine: [indigo.indigo8, indigoDark.indigo8],
+
+  // Views
+  viewBg: [slate.slate1, slateDark.slate1],
+  viewSecondaryBg: [slate.slate2, slateDark.slate2],
+  viewHighlightBg: [indigo.indigo3, indigoDark.indigo3],
+
+  // 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],
@@ -684,8 +716,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],
@@ -706,7 +738,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],
@@ -807,15 +839,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(),
@@ -827,8 +856,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(),
@@ -951,6 +978,7 @@ export const space = {
   s2: 2,
   s3: 3,
   s4: 4,
+  s5: 5,
   s6: 6,
   s8: 8,
   s10: 10,
@@ -967,6 +995,7 @@ export const space = {
   s44: 44,
   s48: 48,
   s56: 56,
+  s60: 60,
   s64: 64,
   s80: 80,
   s96: 96,
@@ -990,11 +1019,13 @@ 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,
@@ -1026,11 +1057,13 @@ 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})`,

package/src/dropdown-menu/index.tsx

@@ -4,12 +4,23 @@ 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} />
 );
 
-export const Trigger = DropdownMenuPrimitive.Trigger;
+export const Trigger = forwardRef<
+  HTMLButtonElement,
+  DropdownMenuPrimitive.DropdownMenuTriggerProps & {triggerEvent?: string}
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+>(({triggerEvent, className, children, ...otherProps}, ref) => {
+  return (
+    <DropdownMenuPrimitive.Trigger ref={ref} className={className} {...otherProps}>
+      {children}
+    </DropdownMenuPrimitive.Trigger>
+  );
+});
 
 const rowItemStyles = {
   ...textStyles.regular,
@@ -22,7 +33,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 +48,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-preview-footer.tsx

@@ -9,6 +9,7 @@ import {useEmojiPreview} from "./primitives/preview-provider";
 import {useEmojiPickerCtx} from "./primitives/root";
 import {useEmojiSkin} from "./primitives/skin-provider";
 import {EmojiPickerSkinTone} from "./primitives/skin-tone";
+import {mobileRootSelector} from "../mobile-styles";
 
 const previewCss = css`
   display: flex;
@@ -70,7 +71,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}
@@ -81,6 +82,9 @@ export const EmojiPickerPreviewFooter: React.FC<{
             position: absolute;
             top: 4px;
             right: ${space.s12}px;
+            ${mobileRootSelector} & {
+              top: 12px;
+            }
           `}
           style={{
             right: space.s12 + measureScrollbar(),

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,10 @@
+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";
+import {forwardRef} from "react";
 
 export type EmojiProps = EmojiPrimitiveProps;
-export const Emoji: React.FC<EmojiPrimitiveProps> = (props) => {
-  return <EmojiPrimitive version={detectEmojiSupportLevel()} native={isApple()} {...props} />;
-};
+export const Emoji = forwardRef<HTMLSpanElement, EmojiPrimitiveProps>((props, ref) => {
+  return <EmojiPrimitive ref={ref} version={detectEmojiSupportLevel()} native={isApple() || isAndroid()} {...props} />;
+});

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

@@ -69,6 +69,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
       label: "Icons",
       children: (
         <AppIconPicker
+          emojiSize={emojiSize}
           color={color}
           onColorSelect={showColorPickerOnTabs.includes("icons") ? onColorSelect : undefined}
           getHoverColor={getHoverColor}
@@ -86,6 +87,7 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
       className={css`
         display: flex;
         flex-direction: column;
+        height: 100%;
       `}
     >
       <TabNavRoot className={tabNavRootStyle}>
@@ -106,7 +108,14 @@ export const IconEmojiPicker: React.FC<IconEmojiPickerProps> = ({
           </TabNavList>
           {onReset && (
             <TabNavItem>
-              <Button size="small" variant="ghost" color="neutral" iconStart={<EmojiDelete />} onClick={onReset}>
+              <Button
+                size="small"
+                variant="ghost"
+                color="neutral"
+                iconStart={<EmojiDelete />}
+                onClick={onReset}
+                supportMobile
+              >
                 {resetLabel}
               </Button>
             </TabNavItem>

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

@@ -1,4 +1,4 @@
-import {FC} from "react";
+import {forwardRef} from "react";
 import {EmojiItem, EmojiSkin, NativeEmoji} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {themeVars} from "../../design-system";
@@ -43,77 +43,75 @@ export type EmojiProps = {
   emoji: string;
   /** max supported version of emojis */
   version?: number;
-  onClick?: (emoji: EmojiItem, event: React.MouseEvent) => void;
   skin?: EmojiSkin;
   /** render emoji as native unicode if possible */
   native?: boolean;
   fallback?: "shortcode" | "hidden";
   showTitle?: boolean;
-};
+} & React.HTMLAttributes<HTMLSpanElement>;
 
-function getTitle(emoji: EmojiItem) {
+export function getTitle(emoji: EmojiItem) {
   if ((emoji as NativeEmoji).native) {
     return emoji.colons;
   }
   return `:${emoji.name}:`;
 }
 
-export const Emoji: FC<EmojiProps> = ({
-  emoji: idOrColons,
-  size,
-  version = 14,
-  fallback = "hidden",
-  skin,
-  native,
-  showTitle = false,
-}) => {
-  const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
-  const config = useEmojiRenderConfig();
-  if (!emoji) {
-    return fallback === "shortcode" ? <>{idOrColons}</> : null;
-  }
+export const Emoji = forwardRef<HTMLSpanElement, EmojiProps>(
+  (
+    {className, emoji: idOrColons, size, version = 14, fallback = "hidden", skin, native, showTitle = false, ...rest},
+    ref
+  ) => {
+    const emoji = useEmojiDataStoreSelector((store) => store.get(idOrColons, {skin}));
+    const config = useEmojiRenderConfig();
+    if (!emoji) {
+      return fallback === "shortcode" ? <>{idOrColons}</> : null;
+    }
 
-  let emojiNode: React.ReactNode;
+    let emojiNode: React.ReactNode;
 
-  if ("native" in emoji) {
-    if (native && version >= emoji.version) {
-      emojiNode = emoji.native;
+    if ("native" in emoji) {
+      if (native && version >= emoji.version) {
+        emojiNode = emoji.native;
+      } else {
+        emojiNode = (
+          <img
+            alt={emoji.name}
+            className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
+            src={emptyPixel}
+            style={{
+              backgroundImage: `url(${emoji.sprite.src})`,
+              backgroundSize: emoji.sprite.size,
+              backgroundPosition: emoji.sprite.position,
+            }}
+          />
+        );
+      }
     } else {
       emojiNode = (
         <img
           alt={emoji.name}
+          loading={config.loading}
+          draggable={config.draggable}
           className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
-          src={emptyPixel}
-          style={{
-            backgroundImage: `url(${emoji.sprite.src})`,
-            backgroundSize: emoji.sprite.size,
-            backgroundPosition: emoji.sprite.position,
-          }}
+          src={emoji.imageUrl}
         />
       );
     }
-  } else {
-    emojiNode = (
-      <img
-        alt={emoji.name}
-        loading={config.loading}
-        draggable={config.draggable}
-        className={cx(size ? emojiSizedImgCss : emojiInlineImgCss)}
-        src={emoji.imageUrl}
-      />
-    );
-  }
 
-  const style = size ? {fontSize: size, width: size, height: size} : {};
+    const style = size ? {fontSize: size, width: size, height: size} : {};
 
-  return (
-    <span
-      style={style}
-      title={showTitle ? getTitle(emoji) : undefined}
-      className={cx(emojiWrapperCss, size && emojiWrapperSizedCss)}
-      aria-label={emoji.name}
-    >
-      {emojiNode}
-    </span>
-  );
-};
+    return (
+      <span
+        ref={ref}
+        style={style}
+        title={showTitle ? getTitle(emoji) : undefined}
+        className={cx(className, emojiWrapperCss, size && emojiWrapperSizedCss)}
+        aria-label={emoji.name}
+        {...rest}
+      >
+        {emojiNode}
+      </span>
+    );
+  }
+);

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

@@ -1,5 +1,6 @@
 import {css} from "@linaria/core";
 import {space} from "../../design-system";
+import {mobileRootSelector} from "../../mobile-styles";
 
 const footerCss = css`
   position: relative;
@@ -9,6 +10,10 @@ const footerCss = css`
 
   display: flex;
   align-items: center;
+
+  ${mobileRootSelector} & {
+    height: 68px;
+  }
 `;
 
 export const EmojiPickerFooter: React.FC<React.PropsWithChildren> = ({children}) => {

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

@@ -12,6 +12,7 @@ import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useFoundEmojis, useSetFoundEmojis} from "./search-provider";
 import {useEmojiSkin} from "./skin-provider";
 import ClearInputFilled from "../../icons/react/ClearInputFilled";
+import {mobileRootSelector} from "../../mobile-styles";
 
 const searchCss = css`
   ${textStyles.regular}
@@ -27,6 +28,10 @@ const searchCss = css`
   padding: 0 ${space.s4}px;
   gap: ${space.s4}px;
 
+  ${mobileRootSelector} & {
+    height: 40px;
+  }
+
   /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
   & .sr-only {
     position: absolute;
@@ -59,6 +64,9 @@ const searchInputCss = css`
 
 const searchIconCss = css`
   padding: ${space.s4}px;
+  ${mobileRootSelector} & {
+    padding: ${space.s6}px;
+  }
 `;
 
 const extraActionSlotCss = css`

package/src/emoji-picker/primitives/skin-tone.tsx

@@ -1,8 +1,10 @@
 import {EmojiSkin} from "@fibery/emoji-data";
 import {css, cx} from "@linaria/core";
 import {useState} from "react";
+import {useIsPhone} from "../../use-is-phone";
 import {IconButton} from "../../button/icon-button";
 import {textStyles, themeVars} from "../../design-system";
+import {mobileRootSelector} from "../../mobile-styles";
 import {Emoji} from "./emoji";
 import {useEmojiPickerCtx, useEmojiPickerI18N} from "./root";
 import {useEmojiSkin, useSetEmojiSkin} from "./skin-provider";
@@ -44,6 +46,10 @@ const skinToneSwatchCss = css`
 
 const expandedCss = css`
   width: 32px;
+
+  ${mobileRootSelector} & {
+    width: 44px;
+  }
 `;
 
 const openedSkinTextCss = css`
@@ -55,12 +61,17 @@ const openedSkinTextCss = css`
   width: 98px;
   color: ${themeVars.accentTextColor};
   padding-left: 8px;
+
+  ${mobileRootSelector} & {
+    display: none;
+  }
 `;
 
 export type EmojiPickerSkinToneProps = {
   className?: string;
 };
 export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({className}) => {
+  const isPhone = useIsPhone();
   const [opened, setOpened] = useState(false);
   const emojiPickerCtx = useEmojiPickerCtx();
   const i18n = useEmojiPickerI18N();
@@ -75,7 +86,7 @@ export const EmojiPickerSkinTone: React.FC<EmojiPickerSkinToneProps> = ({classNa
     skinToneNodes.push(
       <span key={`skin-tone-${skinTone}`} className={cx(skinToneSwatchCss, (selected || opened) && expandedCss)}>
         <IconButton
-          size="large"
+          size={isPhone ? "xLarge" : "large"}
           onClick={() => {
             if (opened) {
               setSkin(skinTone as EmojiSkin);

package/src/emoji-picker/use-responsive-emoji-size.ts

@@ -0,0 +1,11 @@
+import {useMemo} from "react";
+import {measureScrollbar} from "@fibery/helpers/utils/measure-scrollbar";
+import {useIsPhone} from "../use-is-phone";
+
+export const useResponsiveEmojiSize = () => {
+  const isPhone = useIsPhone();
+  return useMemo(
+    () => (isPhone ? Math.min(Math.floor((document.body.clientWidth - 24 - measureScrollbar() - 9 * 12) / 9), 40) : 20),
+    [isPhone]
+  );
+};

package/src/emoji-picker/utils/emoji-set.ts

@@ -1,5 +1,6 @@
 import {SpritesheetSet} from "@fibery/emoji-data";
+import {isAndroid} from "../../is-android";
 
 export const isApple = () => /Mac|iPhone|iPad/.test(navigator.userAgent);
 
-export const getEmojiSet = (): SpritesheetSet => (isApple() ? "apple" : "twitter");
+export const getEmojiSet = (): SpritesheetSet => (isApple() ? "apple" : isAndroid() ? "google" : "twitter");

package/src/empty-state/empty-state.tsx

@@ -1,5 +1,6 @@
 import {css, cx} from "@linaria/core";
 import {fontWeight, space, textStyles, themeVars} from "../design-system";
+import {mobileRootSelector} from "../mobile-styles";
 
 const emptyStateCss = css`
   display: flex;
@@ -31,7 +32,12 @@ const headingCss = css`
   font-weight: ${fontWeight.semibold};
   color: ${themeVars.textColor};
   margin: 0;
+
+  ${mobileRootSelector} & {
+    ${textStyles.heading4}
+  }
 `;
+
 const descriptionCss = css`
   ${textStyles.regular};
   color: ${themeVars.accentTextColor};

package/src/fibermoji-placeholder.tsx

@@ -3,33 +3,7 @@ import {css} from "@linaria/core";
 import {FC, useEffect, useRef} from "react";
 import {textStyles} from "./design-system";
 import {useFeatures} from "./features";
-
-const preservedNameEmojis = ["🤖", "👻", "🧮", "🪄", "🔌", "🔗", "🔒"];
-
-const abbreviateName = (name?: string) => {
-  if (name === undefined) {
-    return "…";
-  }
-  if (preservedNameEmojis.includes(name)) {
-    return name;
-  }
-  const filteredName = (name || "").replace(/[!~.\-@[\]]/g, "").trim();
-  const match = filteredName.match(/\p{Letter}[\p{Letter} ]+/gu);
-  const processedName = match ? match[0] : "";
-  const parts = processedName.split(" ").filter((part) => part !== "");
-  let result;
-  if (parts.length === 1) {
-    result = processedName.slice(0, 2);
-  } else {
-    result = parts
-      .filter((part, index) => index < 2)
-      .map((part) => {
-        return part[0].toUpperCase();
-      })
-      .join("");
-  }
-  return result || "?";
-};
+import {abbreviateName} from "./abbreviate-name";
 
 const cyrb53 = (str: string, seed = 0) => {
   let h1 = 0xdeadbeef ^ seed;