Make illustration icons color responsive using accent theme colors (#17107)

## Summary
- Update all illustration icons to use `theme.accent.accent3` for fill
and `theme.accent.accent8` for border
- Replaces hardcoded `IllustrationIcon.blue` values with
theme-responsive accent colors
- Icons will now adapt correctly to theme changes

## Test plan
- [ ] Navigate to Settings > Data model > select any object
- [ ] Verify the Relations "Type" column icons use the accent colors
- [ ] Verify the Fields "Data type" column icons use the accent colors
- [ ] Switch themes (if available) and verify icons adapt accordingly

packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx

@@ -7,12 +7,11 @@ type IllustrationIconArrayProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconArray = (props: IllustrationIconArrayProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconArrayRaw
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
         height={size}
         width={size}
       />

packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx

@@ -9,12 +9,11 @@ export const IllustrationIconCalendarEvent = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconCalendarEventRaw
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
         height={size}
         width={size}
       />

packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx

@@ -10,14 +10,13 @@ export const IllustrationIconCalendarTime = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconCalendarTimeRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx

@@ -11,14 +11,13 @@ export const IllustrationIconCurrency = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconCurrencyRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx

@@ -9,14 +9,13 @@ type IllustrationIconJsonProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconJson = (props: IllustrationIconJsonProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconJsonRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx

@@ -9,14 +9,13 @@ type IllustrationIconLinkProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconLink = (props: IllustrationIconLinkProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconLinkRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx

@@ -8,14 +8,13 @@ type IllustrationIconMailProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconMail = (props: IllustrationIconMailProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconMailRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx

@@ -10,14 +10,13 @@ export const IllustrationIconManyToMany = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconManyToManyRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx

@@ -8,14 +8,13 @@ type IllustrationIconMapProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconMap = (props: IllustrationIconMapProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconMapRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx

@@ -10,14 +10,13 @@ export const IllustrationIconNumbers = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconNumbersRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx

@@ -11,14 +11,13 @@ export const IllustrationIconOneToMany = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconOneToManyRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx

@@ -11,14 +11,13 @@ export const IllustrationIconOneToOne = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconOneToOneRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx

@@ -9,15 +9,14 @@ type IllustrationIconPhoneProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconPhone = (props: IllustrationIconPhoneProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
 
   return (
     <IllustrationIconWrapper>
       <IllustrationIconPhoneRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx

@@ -11,15 +11,14 @@ export const IllustrationIconSetting = (
 ) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
 
   return (
     <IllustrationIconWrapper>
       <IllustrationIconSettingRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx

@@ -9,15 +9,14 @@ type IllustrationIconStarProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconStar = (props: IllustrationIconStarProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
 
   return (
     <IllustrationIconWrapper>
       <IllustrationIconStarRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx

@@ -9,14 +9,13 @@ type IllustrationIconTagProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconTag = (props: IllustrationIconTagProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconTagRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx

@@ -9,14 +9,13 @@ type IllustrationIconTagsProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconTags = (props: IllustrationIconTagsProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconTagsRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx

@@ -9,14 +9,13 @@ type IllustrationIconTextProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconText = (props: IllustrationIconTextProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconTextRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx

@@ -9,14 +9,13 @@ type IllustrationIconToggleProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconToggle = (props: IllustrationIconToggleProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconToggleRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx

@@ -9,14 +9,13 @@ type IllustrationIconUidProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconUid = (props: IllustrationIconUidProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconUidRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );

packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx

@@ -9,14 +9,13 @@ type IllustrationIconUserProps = Pick<IconComponentProps, 'size'>;
 export const IllustrationIconUser = (props: IllustrationIconUserProps) => {
   const theme = useTheme();
   const size = props.size ?? theme.icon.size.lg;
-  const { color, fill } = theme.IllustrationIcon;
   return (
     <IllustrationIconWrapper>
       <IllustrationIconUserRaw
         height={size}
         width={size}
-        fill={fill.blue}
-        color={color.blue}
+        fill={theme.accent.accent3}
+        color={theme.accent.accent8}
       />
     </IllustrationIconWrapper>
   );