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-ui/src/input/button/components/AnimatedButton.tsx

@@ -2,11 +2,11 @@ import { styled } from '@linaria/react';
 import { useIsMobile } from '@ui/utilities';
 import { getOsShortcutSeparator } from '@ui/utilities/device/getOsShortcutSeparator';
 import { type MotionProps, motion } from 'framer-motion';
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { Pill } from '@ui/components/Pill/Pill';
-import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
 import {
   type ButtonAccent,
   type ButtonPosition,
@@ -446,6 +446,7 @@ export const AnimatedButton = ({
   dataGloballyPreventClickOutside,
   soonLabel = 'Soon',
 }: AnimatedButtonProps) => {
+  const { theme } = useContext(ThemeContext);
   const isMobile = useIsMobile();
   const isDisabled = soon || disabled;
 
@@ -492,7 +493,7 @@ export const AnimatedButton = ({
       {Icon && (
         <StyledIconContainer>
           <motion.div animate={animate} transition={transition}>
-            <Icon size={ICON_SIZES.sm} />
+            <Icon size={theme.icon.size.sm} />
           </motion.div>
         </StyledIconContainer>
       )}

packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx

@@ -4,9 +4,9 @@ import {
   type LightIconButtonAccent,
   type LightIconButtonSize,
 } from '@ui/input/button/components/LightIconButton';
-import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
 import { motion, type MotionProps } from 'framer-motion';
-import { type ComponentProps, type MouseEvent } from 'react';
+import { type ComponentProps, type MouseEvent, useContext } from 'react';
 
 export type AnimatedLightIconButtonProps = {
   className?: string;
@@ -107,6 +107,8 @@ export const AnimatedLightIconButton = ({
   onClick,
   title,
 }: AnimatedLightIconButtonProps) => {
+  const { theme } = useContext(ThemeContext);
+
   return (
     <StyledButton
       data-testid={testId}
@@ -122,7 +124,9 @@ export const AnimatedLightIconButton = ({
     >
       <StyledIconContainer animate={animate} transition={transition}>
         {Icon && (
-          <Icon size={size === 'medium' ? ICON_SIZES.md : ICON_SIZES.sm} />
+          <Icon
+            size={size === 'medium' ? theme.icon.size.md : theme.icon.size.sm}
+          />
         )}
       </StyledIconContainer>
     </StyledButton>

packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx

@@ -2,7 +2,8 @@ import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
 import { Loader } from '@ui/feedback';
 import { baseTransitionTiming } from '@ui/input/button/components/Button/constant';
-import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
+import { useContext } from 'react';
 
 const StyledIcon = styled.div<{
   isLoading: boolean;
@@ -41,17 +42,21 @@ export const ButtonIcon = ({
 }: {
   Icon?: IconComponent;
   isLoading?: boolean;
-}) => (
-  <StyledIconWrapper>
-    {isLoading && (
-      <StyledLoader>
-        <Loader />
-      </StyledLoader>
-    )}
-    {Icon && (
-      <StyledIcon isLoading={!!isLoading}>
-        <Icon size={ICON_SIZES.sm} />
-      </StyledIcon>
-    )}
-  </StyledIconWrapper>
-);
+}) => {
+  const { theme } = useContext(ThemeContext);
+
+  return (
+    <StyledIconWrapper>
+      {isLoading && (
+        <StyledLoader>
+          <Loader />
+        </StyledLoader>
+      )}
+      {Icon && (
+        <StyledIcon isLoading={!!isLoading}>
+          <Icon size={theme.icon.size.sm} />
+        </StyledIcon>
+      )}
+    </StyledIconWrapper>
+  );
+};

packages/twenty-ui/src/input/button/components/FloatingButton.tsx

@@ -1,7 +1,6 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ThemeContext } from '@ui/theme';
-import { themeCssVariables } from '@ui/theme-constants';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
 import { useContext } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -115,6 +114,7 @@ export const FloatingButton = ({
   to,
 }: FloatingButtonProps) => {
   const { theme } = useContext(ThemeContext);
+
   return (
     <StyledButton
       disabled={disabled}

packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx

@@ -1,7 +1,6 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ThemeContext } from '@ui/theme';
-import { themeCssVariables } from '@ui/theme-constants';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
 import React, { useContext } from 'react';
 
 export type FloatingIconButtonSize = 'small' | 'medium';
@@ -118,6 +117,7 @@ export const FloatingIconButton = ({
   isActive,
 }: FloatingIconButtonProps) => {
   const { theme } = useContext(ThemeContext);
+
   return (
     <StyledButton
       disabled={disabled}

packages/twenty-ui/src/input/button/components/IconButton.tsx

@@ -1,8 +1,7 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { GRAY_SCALE_LIGHT, ThemeContext } from '@ui/theme';
-import { themeCssVariables } from '@ui/theme-constants';
 import React, { useContext, useMemo } from 'react';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
 
 export type IconButtonSize = 'medium' | 'small';
 export type IconButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
@@ -79,7 +78,7 @@ const computeIconButtonDynamicStyles = (
             boxShadow: focusOverride
               ? `0 0 0 3px ${themeCssVariables.accent.tertiary}`
               : 'none',
-            color: GRAY_SCALE_LIGHT.gray1,
+            color: themeCssVariables.grayScale.gray1,
             opacity: disabled ? 0.24 : 1,
             hoverBackground: disabled
               ? themeCssVariables.color.blue
@@ -100,7 +99,7 @@ const computeIconButtonDynamicStyles = (
             boxShadow: focusOverride
               ? `0 0 0 3px ${themeCssVariables.color.red3}`
               : 'none',
-            color: GRAY_SCALE_LIGHT.gray1,
+            color: themeCssVariables.grayScale.gray1,
             opacity: disabled ? 0.24 : 1,
             hoverBackground: disabled
               ? themeCssVariables.color.red
@@ -292,6 +291,7 @@ export const IconButton = ({
   to,
 }: IconButtonProps) => {
   const { theme } = useContext(ThemeContext);
+
   const dynamicStyles = useMemo(() => {
     const styles = computeIconButtonDynamicStyles(
       variant,

packages/twenty-ui/src/input/button/components/InsideButton.tsx

@@ -1,7 +1,6 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ThemeContext } from '@ui/theme';
-import { themeCssVariables } from '@ui/theme-constants';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
 import React, { useContext } from 'react';
 
 export type InsideButtonProps = {

packages/twenty-ui/src/input/button/components/LightButton.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants';
-import { type MouseEvent } from 'react';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
+import { type MouseEvent, useContext } from 'react';
 
 export type LightButtonAccent = 'secondary' | 'tertiary';
 
@@ -89,6 +89,8 @@ export const LightButton = ({
   type = 'button',
   onClick,
 }: LightButtonProps) => {
+  const { theme } = useContext(ThemeContext);
+
   return (
     <StyledButton
       onClick={onClick}
@@ -99,7 +101,7 @@ export const LightButton = ({
       className={className}
       active={active}
     >
-      {!!Icon && <Icon size={ICON_SIZES.md} />}
+      {!!Icon && <Icon size={theme.icon.size.md} />}
       {title}
     </StyledButton>
   );

packages/twenty-ui/src/input/button/components/LightIconButton.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants';
-import { type ComponentProps, type MouseEvent } from 'react';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
+import { type ComponentProps, type MouseEvent, useContext } from 'react';
 
 export type LightIconButtonAccent = 'secondary' | 'tertiary';
 export type LightIconButtonSize = 'small' | 'medium';
@@ -105,6 +105,8 @@ export const LightIconButton = ({
   onClick,
   title,
 }: LightIconButtonProps) => {
+  const { theme } = useContext(ThemeContext);
+
   return (
     <StyledButton
       data-testid={testId}
@@ -119,7 +121,9 @@ export const LightIconButton = ({
       title={title}
     >
       {Icon && (
-        <Icon size={size === 'medium' ? ICON_SIZES.md : ICON_SIZES.sm} />
+        <Icon
+          size={size === 'medium' ? theme.icon.size.md : theme.icon.size.sm}
+        />
       )}
     </StyledButton>
   );

packages/twenty-ui/src/input/button/components/MainButton.tsx

@@ -1,7 +1,6 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ThemeContext } from '@ui/theme';
-import { themeCssVariables } from '@ui/theme-constants';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
 import React, { type FunctionComponent, useContext } from 'react';
 
 export type MainButtonVariant = 'primary' | 'secondary';
@@ -106,6 +105,7 @@ export const MainButton = ({
   className,
 }: MainButtonProps) => {
   const { theme } = useContext(ThemeContext);
+
   return (
     <StyledButton
       className={className}

packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx

@@ -1,7 +1,6 @@
 import { styled } from '@linaria/react';
 import { type IconComponent } from '@ui/display';
-import { ThemeContext } from '@ui/theme';
-import { themeCssVariables } from '@ui/theme-constants';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
 import { useContext } from 'react';
 
 export type RoundedIconButtonSize = 'small' | 'medium';

packages/twenty-ui/src/input/button/components/TabButton/internals/components/TabContent.tsx

@@ -1,6 +1,6 @@
 import { Pill } from '@ui/components/Pill/Pill';
 import { Avatar, type IconComponent } from '@ui/display';
-import { ThemeContext } from '@ui/theme';
+import { ThemeContext } from '@ui/theme-constants';
 import { type ReactElement, useContext } from 'react';
 import { StyledTabHover } from './StyledTabBase';
 
@@ -29,6 +29,7 @@ export const TabContent = ({
   className,
 }: TabContentProps) => {
   const { theme } = useContext(ThemeContext);
+
   const iconColor = active
     ? theme.font.color.primary
     : disabled

packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx

@@ -5,8 +5,7 @@ import { ResizeHandle } from '@ui/layout/resize-handle/components/ResizeHandle';
 import { BASE_CODE_EDITOR_THEME_ID } from '@ui/input/code-editor/constants/BaseCodeEditorThemeId';
 import { useResizeHandle } from '@ui/layout/resize-handle/hooks/useResizeHandle';
 import { getBaseCodeEditorTheme } from '@ui/input/code-editor/theme/utils/getBaseCodeEditorTheme';
-import { ThemeContext } from '@ui/theme';
-import { themeCssVariables } from '@ui/theme-constants';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
 import { type editor } from 'monaco-editor';
 import { type KeyboardEvent, useContext, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
@@ -189,9 +188,7 @@ export const CodeEditor = ({
 
             monaco.editor.defineTheme(
               BASE_CODE_EDITOR_THEME_ID,
-              getBaseCodeEditorTheme({
-                theme,
-              }),
+              getBaseCodeEditorTheme(theme),
             );
             monaco.editor.setTheme(BASE_CODE_EDITOR_THEME_ID);
 

packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts

@@ -1,4 +1,4 @@
-import { type ThemeType } from '@ui/theme';
+import { type ThemeType } from '@ui/theme-constants';
 import { type editor } from 'monaco-editor';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -31,11 +31,9 @@ const convertColorToHex = (color: string): string => {
   return color;
 };
 
-export const getBaseCodeEditorTheme = ({
-  theme,
-}: {
-  theme: ThemeType;
-}): editor.IStandaloneThemeData => {
+export const getBaseCodeEditorTheme = (
+  theme: ThemeType,
+): editor.IStandaloneThemeData => {
   return {
     base: 'vs',
     inherit: true,
@@ -45,12 +43,18 @@ export const getBaseCodeEditorTheme = ({
         foreground: convertColorToHex(theme.code.text.gray),
         fontStyle: 'bold',
       },
-      { token: 'keyword', foreground: convertColorToHex(theme.code.text.sky) },
+      {
+        token: 'keyword',
+        foreground: convertColorToHex(theme.code.text.sky),
+      },
       {
         token: 'delimiter',
         foreground: convertColorToHex(theme.code.text.gray),
       },
-      { token: 'string', foreground: convertColorToHex(theme.code.text.pink) },
+      {
+        token: 'string',
+        foreground: convertColorToHex(theme.code.text.pink),
+      },
       {
         token: 'comment',
         foreground: convertColorToHex(theme.code.text.orange),

packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx

@@ -1,8 +1,6 @@
 import { styled } from '@linaria/react';
 import { Checkmark } from '@ui/display/checkmark/components/Checkmark';
 import { type ColorScheme } from '@ui/input/types/ColorScheme';
-import { GRAY_SCALE_DARK, GRAY_SCALE_LIGHT } from '@ui/theme';
-import { themeCssVariables } from '@ui/theme-constants';
 import {
   AnimatePresence,
   type AnimationControls,
@@ -10,6 +8,9 @@ import {
   useAnimation,
 } from 'framer-motion';
 import React from 'react';
+import { GRAY_SCALE_DARK } from '@ui/theme/constants/GrayScaleDark';
+import { GRAY_SCALE_LIGHT } from '@ui/theme/constants/GrayScaleLight';
+import { themeCssVariables } from '@ui/theme-constants';
 
 const StyledColorSchemeBackground = styled.div<
   Pick<ColorSchemeCardProps, 'variant'>

packages/twenty-ui/src/input/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx

@@ -1,16 +1,15 @@
 import { styled } from '@linaria/react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { ComponentDecorator } from '@ui/testing';
-import { useContext } from 'react';
-import { ThemeContext, type ThemeType } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 
 import { ColorSchemeCard } from '../ColorSchemeCard';
 
-const StyledContainer = styled.div<{ theme: ThemeType }>`
+const StyledContainer = styled.div`
   display: flex;
   flex-direction: row;
   > * + * {
-    margin-left: ${({ theme }) => theme.spacing(4)};
+    margin-left: ${themeCssVariables.spacing['4']};
   }
 `;
 
@@ -19,10 +18,8 @@ const meta: Meta<typeof ColorSchemeCard> = {
   component: ColorSchemeCard,
   decorators: [
     (Story) => {
-      const { theme } = useContext(ThemeContext);
-
       return (
-        <StyledContainer theme={theme}>
+        <StyledContainer>
           <Story />
         </StyledContainer>
       );

packages/twenty-ui/src/input/components/SearchInput.tsx

@@ -1,8 +1,7 @@
 import { styled } from '@linaria/react';
 import { IconFilter, IconSearch } from '@ui/display';
 import { IconButton } from '@ui/input/button/components/IconButton';
-import { ThemeContext } from '@ui/theme';
-import { themeCssVariables } from '@ui/theme-constants';
+import { ThemeContext, themeCssVariables } from '@ui/theme-constants';
 import { type ChangeEvent, type ReactNode, useContext, useState } from 'react';
 
 export type SearchInputProps = {

packages/twenty-ui/src/input/components/__stories__/Toggle.stories.tsx

@@ -4,7 +4,7 @@ import {
   type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
-import { MAIN_COLORS_LIGHT } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
 import { useState } from 'react';
 
 import { Toggle, type ToggleSize } from '../Toggle';
@@ -88,7 +88,7 @@ export const Catalog: CatalogStory<Story, typeof InteractiveToggle> = {
             if (color === 'default') {
               return {};
             }
-            return { color: MAIN_COLORS_LIGHT.yellow };
+            return { color: themeCssVariables.color.yellow };
           },
         },
       ],