Deprecate runtime theme objects in favor of CSS variables (#18402)

## Summary

- **Eliminate `ICON_SIZES` / `ICON_STROKES` constants**: all icon
dimensions are now resolved at runtime via
`resolveThemeVariableAsNumber(themeCssVariables.icon.size.X)`, ensuring
values always come from computed CSS variables
- **No more consumer imports from `twenty-ui/theme`**: moved
`ColorSchemeContext`, `ColorSchemeProvider`, `ThemeColor`,
`MAIN_COLOR_NAMES`, `getNextThemeColor`, `AnimationDuration` to
`twenty-ui/theme-constants`
- **Remove `ThemeContext` / `ThemeContextProvider` / `ThemeProvider` /
`ThemeType`**: replaced across ~300 files with `themeCssVariables` (for
CSS contexts) or `resolveThemeVariable` / `resolveThemeVariableAsNumber`
(for JS runtime values)
- **Simplify provider chain**: only `ColorSchemeProvider` remains — it
toggles `light`/`dark` class on `document.documentElement` and provides
`colorScheme` via React context
- **Fix pre-existing test failures**: `useIcons.test.ts`
(non-configurable ES module spy) and
`turnRecordFilterGroupIntoGqlOperationFilter.test.ts`
(`Omit<RecordFilter, 'id'>` type mismatch)

### Theme access pattern (before → after)

| Context | Before | After |
|---------|--------|-------|
| CSS (Linaria) | `${({ theme }) => theme.font.color.primary}` |
`${themeCssVariables.font.color.primary}` |
| JS runtime (icon size, animation) | `theme.icon.size.md` /
`ICON_SIZES.md` |
`resolveThemeVariableAsNumber(themeCssVariables.icon.size.md)` |
| Color scheme check | `theme.name === 'dark'` |
`useContext(ColorSchemeContext).colorScheme === 'dark'` |

packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx

@@ -1,8 +1,8 @@
 import { Draggable } from '@hello-pangea/dnd';
 import { isFunction } from '@sniptt/guards';
-import { isDefined } from 'twenty-shared/utils';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
+import { isDefined } from 'twenty-shared/utils';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 
 type DraggableItemProps = {
   draggableId: string;
@@ -30,7 +30,6 @@ export const DraggableItem = ({
   containerOffsetY,
 }: DraggableItemProps) => {
   const { theme } = useContext(ThemeContext);
-
   return (
     <Draggable
       key={draggableId}

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx

@@ -6,8 +6,7 @@ import {
   type IconComponent,
 } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledNonClickableStartIcon = styled.div`
   align-items: center;
@@ -42,7 +41,6 @@ export const DropdownMenuHeaderLeftComponent = ({
   | Record<never, never>
 )) => {
   const { theme } = useContext(ThemeContext);
-
   return (
     <>
       {'Icon' in props &&

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx

@@ -4,12 +4,11 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 
 import { styled } from '@linaria/react';
+import { useContext } from 'react';
 import { IconChevronDown } from 'twenty-ui/display';
 import { type SelectOption } from 'twenty-ui/input';
 import { MenuItemSelect } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledDropdownMenuInnerSelectDropdownButton = styled.div`
   align-items: center;
@@ -46,7 +45,6 @@ export const DropdownMenuInnerSelect = ({
   widthInPixels,
 }: DropdownMenuInnerSelectProps) => {
   const { theme } = useContext(ThemeContext);
-
   const { closeDropdown } = useCloseDropdown();
 
   return (

packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx

@@ -6,9 +6,8 @@ import { ExpandableList } from '@/ui/layout/expandable-list/components/Expandabl
 import { isDefined } from 'twenty-shared/utils';
 import { Tag } from 'twenty-ui/components';
 import { ComponentDecorator } from 'twenty-ui/testing';
-import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
-
+import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';
 const StyledContainer = styled.div`
   padding: ${themeCssVariables.spacing[1]};
   width: 300px;

packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx

@@ -9,13 +9,11 @@ import { styled } from '@linaria/react';
 import { i18n } from '@lingui/core';
 import { t } from '@lingui/core/macro';
 import { motion } from 'framer-motion';
+import { useContext } from 'react';
 import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
 import { AnimatedButton } from 'twenty-ui/input';
 import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledButtonWrapper = styled.div<{ alignToTop: boolean }>`
   align-items: ${({ alignToTop }) => (alignToTop ? 'center' : 'initial')};
   display: ${({ alignToTop }) => (alignToTop ? 'flex' : 'block')};
@@ -45,6 +43,7 @@ const AnimatedIcon = ({
   isCommandMenuOpened: boolean;
 }) => {
   const { theme } = useContext(ThemeContext);
+
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -68,7 +67,9 @@ const AnimatedIcon = ({
           scale: isCommandMenuOpened ? 0 : 1,
           opacity: isCommandMenuOpened ? 0 : 1,
         }}
-        transition={{ duration: theme.animation.duration.fast }}
+        transition={{
+          duration: theme.animation.duration.fast,
+        }}
       />
 
       {/* X lines expanding from center */}
@@ -99,7 +100,9 @@ const AnimatedIcon = ({
           scale: isCommandMenuOpened ? 0 : 1,
           opacity: isCommandMenuOpened ? 0 : 1,
         }}
-        transition={{ duration: theme.animation.duration.fast }}
+        transition={{
+          duration: theme.animation.duration.fast,
+        }}
       />
 
       {/* Bottom dot */}
@@ -112,13 +115,16 @@ const AnimatedIcon = ({
           scale: isCommandMenuOpened ? 0 : 1,
           opacity: isCommandMenuOpened ? 0 : 1,
         }}
-        transition={{ duration: theme.animation.duration.fast }}
+        transition={{
+          duration: theme.animation.duration.fast,
+        }}
       />
     </svg>
   );
 };
 
 export const PageHeaderToggleCommandMenuButton = () => {
+  const { theme } = useContext(ThemeContext);
   const { toggleCommandMenu } = useCommandMenu();
   const isCommandMenuOpened = useAtomStateValue(isCommandMenuOpenedState);
   const isNavigationMenuInEditMode = useAtomStateValue(
@@ -133,9 +139,6 @@ export const PageHeaderToggleCommandMenuButton = () => {
   const ariaLabel = isCommandMenuOpened
     ? t`Close command menu`
     : t`Open command menu`;
-
-  const { theme } = useContext(ThemeContext);
-
   return (
     <StyledButtonWrapper alignToTop={alignWithCommandMenuTopBar}>
       <div id="toggle-command-menu-button">

packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx

@@ -27,9 +27,7 @@ import { styled } from '@linaria/react';
 import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 import { Outlet } from 'react-router-dom';
 import { useScreenSize } from 'twenty-ui/utilities';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { ThemeContext } from 'twenty-ui/theme';
-
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledLayout = styled.div`
   background: ${themeCssVariables.background.noisy};
   display: flex;
@@ -66,10 +64,10 @@ const StyledMainContainer = styled.div`
 export const DefaultLayout = () => {
   const isMobile = useIsMobile();
   const isSettingsPage = useIsSettingsPage();
-  const { theme } = useContext(ThemeContext);
   const windowsWidth = useScreenSize().width;
   const showAuthModal = useShowAuthModal();
   const useShowFullScreen = useShowFullscreen();
+  const { theme } = useContext(ThemeContext);
 
   return (
     <>

packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx

@@ -15,8 +15,11 @@ import {
   OverflowingTextWithTooltip,
 } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
-import { ThemeContext } from 'twenty-ui/theme';
-import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  MOBILE_VIEWPORT,
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui/theme-constants';
 
 const StyledTopBarContainer = styled.div<{ isMobile: boolean }>`
   align-items: center;

packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx

@@ -8,8 +8,7 @@ import { lazy, Suspense, useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const ActivityRichTextEditor = lazy(() =>
   import('@/activities/components/ActivityRichTextEditor').then((module) => ({
@@ -33,7 +32,6 @@ const StyledSkeletonContainer = styled.div`
 
 const LoadingSkeleton = () => {
   const { theme } = useContext(ThemeContext);
-
   return (
     <StyledSkeletonContainer>
       <SkeletonTheme

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -11,8 +11,7 @@ import {
   type IconComponent,
 } from 'twenty-ui/display';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { v4 as uuidV4 } from 'uuid';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import {

packages/twenty-front/src/modules/ui/layout/tab-list/components/TabAvatar.tsx

@@ -2,7 +2,7 @@ import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { Avatar } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 
 export const TabAvatar = ({ tab }: { tab: SingleTabProps }) => {
   const { theme } = useContext(ThemeContext);

packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx

@@ -2,8 +2,7 @@ import { styled } from '@linaria/react';
 import { type ReactNode, useContext, useState } from 'react';
 import { TableBody } from './TableBody';
 import { IconChevronDown, IconChevronUp, Label } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 type TableSectionProps = {
   children: ReactNode;
@@ -41,8 +40,8 @@ export const TableSection = ({
   isInitiallyExpanded = true,
   title,
 }: TableSectionProps) => {
-  const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded);
   const { theme } = useContext(ThemeContext);
+  const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded);
 
   const handleToggleSection = () =>
     setIsExpanded((previousIsExpanded) => !previousIsExpanded);