houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
## 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'` |
This commit is contained in:
Charles Bochet
2026-03-05 14:39:01 +01:00
committed by GitHub
parent 7293d4c1f8
commit 647c32ff3e
432 changed files with 1243 additions and 1433 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
+4 -3
View File
@@ -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
+7 -3
View File
@@ -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
+20 -15
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+4 -4
View File
@@ -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 -2
View File
@@ -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
+5 -3
View File
@@ -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
+7 -3
View File
@@ -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
+2 -2
View File
@@ -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 -2
View File
@@ -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
+2 -1
View File
@@ -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