Object icon visual parity (#19374)

## Summary

Aligns **object metadata** icons with the **tinted tile** look
everywhere we show a workspace object, and **retires** the
navigation-only `NavigationMenuItemStyleIcon` wrapper in favor of
**shared** UI primitives under `@/ui/display` and `@/object-metadata`.

## What changed

### Global tinted icon building blocks (`@/ui/display`)

- **`TintedIconTile`** / **`StyledTintedIconTileContainer`** support
optional **`size`** and **`stroke`**, and grow the tile when **`size`**
is set so layouts match previous `theme.icon` usage.
- Shared helpers and constants for theme color parsing and tinted
backgrounds/borders/icon color (e.g.
**`getTintedIconTileStyleFromColor`**, **`parseThemeColor`**,
**`getColorFromTheme`**, related constants).

### Object metadata icon (`@/object-metadata`)

- **`ObjectMetadataIcon`** composes **`TintedIconTile`** with
**`getObjectColorWithFallback`**, forwards optional **`size`** /
**`stroke`** for **visual parity** with old `getIcon` + explicit sizing.
- **`getSelectOptionIconFromObjectMetadataItem`** returns an
**`IconComponent`** for selects/menus that expect a component, not a
React node.

### Navigation module cleanup

- **Removed** **`NavigationMenuItemStyleIcon`**; call sites use
**`ObjectMetadataIcon`**, **`TintedIconTile`**, and/or the shared
**`getTintedIconTileStyleFromColor`** pipeline so the same treatment is
**not** tied to the navigation package.
- **`NavigationMenuItemIcon`**, view/link overlays, DnD handle, and
sidebar editor flows updated to use the shared pattern where they render
object (or tinted) icons.

### Product surfaces updated (non-exhaustive)

- **Settings:** role object picker/rows, data model
tables/graph/overview, object preview summary, webhooks entity list,
morph relation multiselect.
- **Workflows:** create/update/delete/upsert/find records, triggers,
filters, variables dropdowns, AI agent object rows, object dropdowns.
- **Shell:** side panel object filter / data sources / folder chrome
where object icons appear.
- **Records:** index header icon, show breadcrumb styling.
- **Activity:** timeline event icon when linked object metadata applies.
- **`NavigationDrawerItem`:** tinted branch aligned with shared
**`TintedIconTile`** behavior.

---------

Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com>

packages/twenty-front/src/modules/ui/input/components/MultiSelectControl.tsx

@@ -9,7 +9,9 @@ import {
   IconChevronDown,
   type IconComponent,
   OverflowingTextWithTooltip,
+  TintedIconTile,
 } from 'twenty-ui/display';
+import { type ThemeColor } from 'twenty-ui/theme';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledIconChevronDownWrapper = styled.div<{
@@ -25,6 +27,7 @@ const StyledIconChevronDownWrapper = styled.div<{
 type MultiSelectOptionType = {
   label: string;
   Icon: IconComponent;
+  iconThemeColor?: ThemeColor | null;
 };
 
 type MultiSelectControlProps = Omit<SelectControlProps, 'selectedOption'> & {
@@ -59,11 +62,22 @@ export const MultiSelectControl = ({
           stroke: theme.icon.stroke.sm,
         })
       ) : isDefined(firstSelectedOption?.Icon) ? (
-        <firstSelectedOption.Icon
-          color={isDisabled ? theme.font.color.light : theme.font.color.primary}
-          size={theme.icon.size.md}
-          stroke={theme.icon.stroke.sm}
-        />
+        isDefined(firstSelectedOption.iconThemeColor) ? (
+          <TintedIconTile
+            Icon={firstSelectedOption.Icon}
+            color={firstSelectedOption.iconThemeColor}
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
+        ) : (
+          <firstSelectedOption.Icon
+            color={
+              isDisabled ? theme.font.color.light : theme.font.color.primary
+            }
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
+        )
       ) : null}
       {isDefined(fixedText) ? (
         <OverflowingTextWithTooltip text={fixedText} />

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -226,6 +226,7 @@ export const Select = <Value extends SelectValue>({
                 <DropdownMenuItemsContainer scrollable={false}>
                   <MenuItemSelect
                     LeftIcon={pinnedOption.Icon}
+                    leftIconColor={pinnedOption.iconThemeColor}
                     text={pinnedOption.label}
                     contextualText={pinnedOption.contextualText}
                     selected={
@@ -262,6 +263,7 @@ export const Select = <Value extends SelectValue>({
                       >
                         <MenuItemSelect
                           LeftIcon={option.Icon}
+                          leftIconColor={option.iconThemeColor}
                           text={option.label}
                           contextualText={option.contextualText}
                           selected={

packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx

@@ -2,7 +2,11 @@ import { type SelectSizeVariant } from '@/ui/input/components/Select';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronDown, OverflowingTextWithTooltip } from 'twenty-ui/display';
+import {
+  IconChevronDown,
+  OverflowingTextWithTooltip,
+  TintedIconTile,
+} from 'twenty-ui/display';
 import { type SelectOption } from 'twenty-ui/input';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
@@ -88,11 +92,22 @@ export const SelectControl = ({
       title={selectedOption.fullLabel}
     >
       {isDefined(selectedOption?.Icon) ? (
-        <selectedOption.Icon
-          color={isDisabled ? theme.font.color.light : theme.font.color.primary}
-          size={theme.icon.size.md}
-          stroke={theme.icon.stroke.sm}
-        />
+        isDefined(selectedOption.iconThemeColor) ? (
+          <TintedIconTile
+            Icon={selectedOption.Icon}
+            color={selectedOption.iconThemeColor}
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
+        ) : (
+          <selectedOption.Icon
+            color={
+              isDisabled ? theme.font.color.light : theme.font.color.primary
+            }
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
+        )
       ) : null}
       <OverflowingTextWithTooltip
         text={

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -1,4 +1,3 @@
-import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/display/components/NavigationMenuItemStyleIcon';
 import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { NAVIGATION_DRAWER_COLLAPSED_WIDTH } from '@/ui/layout/resizable-panel/constants/NavigationDrawerCollapsedWidth';
 import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
@@ -21,6 +20,7 @@ import {
   Label,
   OverflowingTextWithTooltip,
   type TablerIconsProps,
+  TintedIconTile,
   TooltipDelay,
   TooltipPosition,
 } from 'twenty-ui/display';
@@ -355,7 +355,7 @@ export const NavigationDrawerItem = ({
           {Icon &&
             (isNonEmptyString(iconColor) ? (
               <StyledIcon>
-                <NavigationMenuItemStyleIcon Icon={Icon} color={iconColor} />
+                <TintedIconTile Icon={Icon} color={iconColor} />
               </StyledIcon>
             ) : (
               <StyledIcon>