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/theme/constants/ThemeDark.ts

@@ -3,7 +3,6 @@ import { ILLUSTRATION_ICON_DARK } from '@ui/theme/constants/IllustrationIconDark
 import { COLOR_DARK } from './ColorsDark';
 import { GRAY_SCALE_DARK } from './GrayScaleDark';
 import { SNACK_BAR_DARK } from './SnackBarDark';
-import type { ThemeType } from '../types/ThemeType';
 import { ACCENT_DARK } from './AccentDark';
 import { BACKGROUND_DARK } from './BackgroundDark';
 import { BORDER_DARK } from './BorderDark';
@@ -12,8 +11,9 @@ import { CODE_DARK } from './CodeDark';
 import { FONT_DARK } from './FontDark';
 import { TAG_DARK } from './TagDark';
 import { THEME_COMMON } from './ThemeCommon';
+import type { THEME_LIGHT } from './ThemeLight';
 
-export const THEME_DARK: ThemeType = {
+export const THEME_DARK: typeof THEME_LIGHT = {
   ...THEME_COMMON,
   ...{
     accent: ACCENT_DARK,

packages/twenty-ui/src/theme/index.ts

@@ -52,11 +52,3 @@ export { THEME_DARK } from './constants/ThemeDark';
 export { THEME_LIGHT } from './constants/ThemeLight';
 export { TRANSPARENT_COLORS_DARK } from './constants/TransparentColorsDark';
 export { TRANSPARENT_COLORS_LIGHT } from './constants/TransparentColorsLight';
-export type { ThemeContextType } from './provider/ThemeContextProvider';
-export {
-  ThemeContext,
-  ThemeContextProvider,
-} from './provider/ThemeContextProvider';
-export { ThemeProvider } from './provider/ThemeProvider';
-export type { ThemeType } from './types/ThemeType';
-export { getNextThemeColor } from './utils/getNextThemeColor';

packages/twenty-ui/src/theme/provider/ThemeContextProvider.tsx

@@ -1,30 +0,0 @@
-import { createContext, useLayoutEffect } from 'react';
-
-import { type ThemeType } from '@ui/theme/types/ThemeType';
-
-export type ThemeContextType = {
-  theme: ThemeType;
-};
-
-export const ThemeContext = createContext<ThemeContextType>(
-  {} as ThemeContextType,
-);
-
-export const ThemeContextProvider = ({
-  children,
-  theme,
-}: {
-  children: React.ReactNode;
-  theme: ThemeType;
-}) => {
-  useLayoutEffect(() => {
-    const root = document.documentElement;
-    const isDark = theme.name === 'dark';
-    root.classList.toggle('dark', isDark);
-    root.classList.toggle('light', !isDark);
-  }, [theme.name]);
-
-  return (
-    <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>
-  );
-};

packages/twenty-ui/src/theme/provider/ThemeProvider.tsx

@@ -1,14 +0,0 @@
-import { type ReactNode } from 'react';
-
-import { ThemeContextProvider } from '@ui/theme/provider/ThemeContextProvider';
-
-import { type ThemeType } from '..';
-
-type ThemeProviderProps = {
-  theme: ThemeType;
-  children: ReactNode;
-};
-
-export const ThemeProvider = ({ theme, children }: ThemeProviderProps) => {
-  return <ThemeContextProvider theme={theme}>{children}</ThemeContextProvider>;
-};

packages/twenty-ui/src/theme/types/ThemeType.ts

@@ -1,3 +0,0 @@
-import { type THEME_LIGHT } from '../constants/ThemeLight';
-
-export type ThemeType = typeof THEME_LIGHT;

packages/twenty-ui/src/theme/utils/__tests__/getNextThemeColor.test.ts

@@ -1,28 +0,0 @@
-import {
-  MAIN_COLOR_NAMES,
-  type ThemeColor,
-} from '@ui/theme/constants/MainColorNames';
-
-import { getNextThemeColor } from '../getNextThemeColor';
-
-describe('getNextThemeColor', () => {
-  it('returns the next theme color', () => {
-    const currentColor: ThemeColor = MAIN_COLOR_NAMES[0];
-    const nextColor: ThemeColor = MAIN_COLOR_NAMES[1];
-
-    expect(getNextThemeColor(currentColor)).toBe(nextColor);
-  });
-
-  it('returns the first color when reaching the end', () => {
-    const currentColor: ThemeColor =
-      MAIN_COLOR_NAMES[MAIN_COLOR_NAMES.length - 1];
-    const nextColor: ThemeColor = MAIN_COLOR_NAMES[0];
-
-    expect(getNextThemeColor(currentColor)).toBe(nextColor);
-  });
-  it('returns the first color when currentColorIsUndefined', () => {
-    const firstColor: ThemeColor = MAIN_COLOR_NAMES[0];
-
-    expect(getNextThemeColor(undefined)).toBe(firstColor);
-  });
-});

packages/twenty-ui/src/theme/utils/getNextThemeColor.ts

@@ -1,13 +0,0 @@
-import { MAIN_COLOR_NAMES, type ThemeColor } from '@ui/theme';
-import { isDefined } from 'twenty-shared/utils';
-
-export const getNextThemeColor = (currentColor?: ThemeColor): ThemeColor => {
-  if (!isDefined(currentColor)) {
-    return MAIN_COLOR_NAMES[0];
-  }
-  const currentColorIndex = MAIN_COLOR_NAMES.findIndex(
-    (color) => color === currentColor,
-  );
-  const nextColorIndex = (currentColorIndex + 1) % MAIN_COLOR_NAMES.length;
-  return MAIN_COLOR_NAMES[nextColorIndex];
-};