[DevXP] Improve Linaria pre-build speed (#18382)

## Summary

This PR improves Linaria/WYW pre-build speed and continues the migration
of `twenty-ui` components away from runtime `ThemeContext` reads toward
static CSS variables and theme constants.

### Linaria/WYW profiling plugin improvements (`twenty-shared`)

- **Babel JIT warmup**: added a `buildStart` warmup step that triggers
WYW's Babel JIT compilation before the real build starts, so the first
real file doesn't pay the cold-start penalty
- **`configResolved` hook**: detects dev vs prod mode and resolves the
correct warmup file path relative to `config.root`
- **Dev-only per-file logging**: slow file warnings are now gated behind
`isDevMode`, keeping production/CI build output clean
- **`closeBundle` summary**: moved the final top-slow-files report to
`closeBundle` for accurate end-of-build reporting
- **Removed noisy progress interval logging** in favor of the warmup log
+ final summary

### Migration from `ThemeContext` to static CSS variables / constants

Across `twenty-ui`, replaced runtime `useTheme()` reads with:
- `themeCssVariables` CSS custom properties (colors, spacing)
- Hard-coded design-system constants (`ICON.size.md` → `16`,
`ICON.stroke.sm` → `1.6`) so components no longer need a React context
at render time — enabling Linaria static extraction

**Components migrated:**
- `Button`, `AnimatedButton`, `LightButton`, `LightIconButton`,
`AnimatedLightIconButton`, `ButtonIcon`, `ButtonSoon`
- `ProgressBar` (Framer Motion width animation → CSS `transition`)
- `Info`, `HorizontalSeparator`, `LinkChip`
- `MenuPicker`, `MenuItemLeftContent`, `MenuItemIconWithGripSwap`,
`NavigationBarItem`
- `JsonArrow`, `JsonNestedNode`
- `ModalHeader`

### Other
- Added `aria-valuenow` to `ProgressBar` for accessibility
- `VisibilityHidden` component updated to inline accessibility styles

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminTableCard.tsx

@@ -2,52 +2,10 @@ import { Table } from '@/ui/layout/table/components/Table';
 import { TableBody } from '@/ui/layout/table/components/TableBody';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { styled } from '@linaria/react';
-import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { type IconComponent } from 'twenty-ui/display';
 import { Card } from 'twenty-ui/layout';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-
-const StyledCard = styled(Card)`
-  background-color: ${themeCssVariables.background.secondary};
-  border: 1px solid ${themeCssVariables.border.color.medium};
-`;
-
-const StyledTableRow = styled(TableRow)`
-  height: ${themeCssVariables.spacing[6]};
-`;
-
-const StyledTableCellLabel = styled(TableCell)<{
-  align?: 'left' | 'center' | 'right';
-}>`
-  color: ${themeCssVariables.font.color.tertiary};
-  height: ${themeCssVariables.spacing[6]};
-  display: flex;
-  gap: ${themeCssVariables.spacing[2]};
-  justify-content: ${({ align }) =>
-    align === 'right'
-      ? 'flex-end'
-      : align === 'center'
-        ? 'center'
-        : 'flex-start'};
-`;
-
-const StyledTableCellValue = styled(TableCell)<{
-  align?: 'left' | 'center' | 'right';
-  clickable?: boolean;
-}>`
-  color: ${themeCssVariables.font.color.primary};
-  cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
-  height: ${themeCssVariables.spacing[6]};
-  justify-content: ${({ align }) =>
-    align === 'left'
-      ? 'flex-start'
-      : align === 'center'
-        ? 'center'
-        : 'flex-end'};
-`;
+import { ICON_SIZES, themeCssVariables } from 'twenty-ui/theme-constants';
 
 type TableItem = {
   Icon?: IconComponent;
@@ -73,32 +31,42 @@ export const SettingsAdminTableCard = ({
   valueAlign = 'left',
   className,
 }: SettingsAdminTableCardProps) => {
-  const { theme } = useContext(ThemeContext);
-
   return (
-    <StyledCard rounded={rounded} className={className}>
+    <Card
+      rounded={rounded}
+      className={className}
+      backgroundColor={themeCssVariables.background.secondary}
+    >
       <Table>
         <TableBody>
           {items.map((item, index) => (
-            <StyledTableRow
+            <TableRow
               key={index + item.label}
               gridAutoColumns={gridAutoColumns}
+              height={themeCssVariables.spacing[6]}
             >
-              <StyledTableCellLabel align={labelAlign}>
-                {item.Icon && <item.Icon size={theme.icon.size.md} />}
+              <TableCell
+                align={labelAlign}
+                color={themeCssVariables.font.color.tertiary}
+                height={themeCssVariables.spacing[6]}
+                gap={themeCssVariables.spacing[2]}
+              >
+                {item.Icon && <item.Icon size={ICON_SIZES.md} />}
                 <span>{item.label}</span>
-              </StyledTableCellLabel>
-              <StyledTableCellValue
+              </TableCell>
+              <TableCell
                 align={valueAlign}
+                color={themeCssVariables.font.color.primary}
+                height={themeCssVariables.spacing[6]}
                 onClick={item.onClick}
                 clickable={isDefined(item.onClick)}
               >
                 {item.value}
-              </StyledTableCellValue>
-            </StyledTableRow>
+              </TableCell>
+            </TableRow>
           ))}
         </TableBody>
       </Table>
-    </StyledCard>
+    </Card>
   );
 };