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/ThemeProvider.tsx

@@ -0,0 +1,119 @@
+import { createContext, useLayoutEffect, useState } from 'react';
+
+import { themeCssVariables } from './themeCssVariables';
+
+type StringLeaves<T> = {
+  [K in keyof T]: T[K] extends string ? string : StringLeaves<T[K]>;
+};
+
+type DeepMerge<T, U> = {
+  [K in keyof T]: K extends keyof U
+    ? U[K] extends Record<string, unknown>
+      ? T[K] extends Record<string, unknown>
+        ? DeepMerge<T[K], U[K]>
+        : U[K]
+      : U[K]
+    : T[K];
+};
+
+// CSS variables that resolve to pure numbers at runtime
+type NumericOverrides = {
+  icon: {
+    size: { sm: number; md: number; lg: number; xl: number };
+    stroke: { sm: number; md: number; lg: number };
+  };
+  animation: {
+    duration: { instant: number; fast: number; normal: number; slow: number };
+  };
+  text: {
+    lineHeight: { lg: number; md: number };
+    iconSizeMedium: number;
+    iconSizeSmall: number;
+    iconStrikeLight: number;
+    iconStrikeMedium: number;
+    iconStrikeBold: number;
+  };
+  spacingMultiplicator: number;
+  lastLayerZIndex: number;
+};
+
+export type ThemeType = DeepMerge<
+  StringLeaves<typeof themeCssVariables>,
+  NumericOverrides
+>;
+
+export type ThemeContextType = {
+  theme: ThemeType;
+  colorScheme: 'light' | 'dark';
+};
+
+const computeThemeFromCss = (): ThemeType => {
+  const root = document?.documentElement;
+
+  if (!root) {
+    return themeCssVariables as unknown as ThemeType;
+  }
+
+  const computedStyle = getComputedStyle(root);
+
+  const resolve = (obj: Record<string, unknown>): Record<string, unknown> => {
+    const result: Record<string, unknown> = {};
+
+    for (const key of Object.keys(obj)) {
+      const value = obj[key];
+
+      if (typeof value === 'string' && value.startsWith('var(')) {
+        const varName = value.slice(4, -1);
+        const raw = computedStyle.getPropertyValue(varName).trim();
+        const num = Number(raw);
+        result[key] = raw !== '' && !isNaN(num) ? num : raw;
+      } else if (typeof value === 'object' && value !== null) {
+        result[key] = resolve(value as Record<string, unknown>);
+      } else {
+        result[key] = value;
+      }
+    }
+
+    return result;
+  };
+
+  return resolve(
+    themeCssVariables as unknown as Record<string, unknown>,
+  ) as unknown as ThemeType;
+};
+
+const applyColorSchemeClass = (colorScheme: 'light' | 'dark') => {
+  const root = document?.documentElement;
+  if (!root?.classList) return;
+  root.classList.toggle('dark', colorScheme === 'dark');
+  root.classList.toggle('light', colorScheme === 'light');
+};
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: themeCssVariables as unknown as ThemeType,
+  colorScheme: 'light',
+});
+
+export const ThemeProvider = ({
+  children,
+  colorScheme,
+}: {
+  children: React.ReactNode;
+  colorScheme: 'light' | 'dark';
+}) => {
+  const [theme, setTheme] = useState<ThemeType>(() => {
+    applyColorSchemeClass(colorScheme);
+    return computeThemeFromCss();
+  });
+
+  useLayoutEffect(() => {
+    applyColorSchemeClass(colorScheme);
+    setTheme(computeThemeFromCss());
+  }, [colorScheme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, colorScheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

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

@@ -0,0 +1,28 @@
+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(MAIN_COLOR_NAMES, 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(MAIN_COLOR_NAMES, currentColor)).toBe(nextColor);
+  });
+  it('returns the first color when currentColorIsUndefined', () => {
+    const firstColor: ThemeColor = MAIN_COLOR_NAMES[0];
+
+    expect(getNextThemeColor(MAIN_COLOR_NAMES, undefined)).toBe(firstColor);
+  });
+});

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

@@ -1,18 +1,3 @@
 // CSS custom properties don't work in media queries, so MOBILE_VIEWPORT
 // must be a static number rather than a var(--...) reference.
 export const MOBILE_VIEWPORT = 768;
-
-// Numeric icon size/stroke constants for components that require pixel values
-// (e.g. icon size props) rather than CSS variable strings.
-export const ICON_SIZES = {
-  sm: 14,
-  md: 16,
-  lg: 20,
-  xl: 24,
-} as const;
-
-export const ICON_STROKES = {
-  sm: 1.6,
-  md: 2,
-  lg: 2.5,
-} as const;

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

@@ -0,0 +1,15 @@
+import { type ThemeColor } from '@ui/theme/constants/MainColorNames';
+
+export const getNextThemeColor = (
+  colorNames: ThemeColor[],
+  currentColor?: ThemeColor,
+): ThemeColor => {
+  if (currentColor === null || currentColor === undefined) {
+    return colorNames[0];
+  }
+  const currentColorIndex = colorNames.findIndex(
+    (color) => color === currentColor,
+  );
+  const nextColorIndex = (currentColorIndex + 1) % colorNames.length;
+  return colorNames[nextColorIndex];
+};

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

@@ -7,5 +7,8 @@
  *                              |___/
  */
 
-export { MOBILE_VIEWPORT, ICON_SIZES, ICON_STROKES } from './constants';
+export { MOBILE_VIEWPORT } from './constants';
+export { getNextThemeColor } from './getNextThemeColor';
 export { themeCssVariables } from './themeCssVariables';
+export type { ThemeType, ThemeContextType } from './ThemeProvider';
+export { ThemeContext, ThemeProvider } from './ThemeProvider';