mirror of
https://github.com/twentyhq/twenty
synced 2026-04-21 13:37:22 +00:00
3bfdc2c83f
## Summary
Continues the Emotion → Linaria migration (PR 4-6 from the [migration
plan](docs/emotion-to-linaria-migration-plan.md)). Migrates **311
files** across four module groups:
| Module | Files |
|---|---|
| command-menu | 53 |
| workflow | 84 |
| page-layout | 84 |
| UI (partial - first ~80 files) | ~80 |
| twenty-ui (TEXT_INPUT_STYLE) | 1 |
| misc (hooks, keyboard-shortcut-menu, file-upload) | ~9 |
### Migration patterns applied
- `import styled from '@emotion/styled'` → `import { styled } from
'@linaria/react'`
- `import { useTheme } from '@emotion/react'` → `import { useContext }
from 'react'` + `import { ThemeContext } from 'twenty-ui/theme'`
- `${({ theme }) => theme.X.Y.Z}` → `${themeCssVariables.X.Y.Z}` (static
CSS variables)
- `theme.spacing(N)` → `themeCssVariables.spacing[N]`
- `styled(motion.div)` → `motion.create(StyledBase)` (11 components)
- `styled(Component)<TypeParams>` → wrapper div approach for non-HTML
elements
- Multi-declaration interpolations split into one CSS property per
interpolation
- Interpolation return types fixed (`&&` → ternary `? : ''`)
- `TEXT_INPUT_STYLE` converted from function to static string constant
(backward compatible)
- Emotion `<Global>` replaced with `useEffect` style injection
- Complex runtime-dependent styles use CSS custom properties via
`style={}` prop
### After this PR
- **Remaining files**: ~400 (object-record: ~160, settings: ~200, UI:
~44)
- **No breaking changes**: CSS variables resolve identically to the
previous Emotion theme values
69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
import { type ReactNode } from 'react';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
export const StyledPageInfoContainer = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
gap: ${themeCssVariables.spacing[0.5]};
|
|
`;
|
|
|
|
export const StyledPageInfoIcon = styled.div<{ iconColor?: string }>`
|
|
align-items: center;
|
|
background: ${themeCssVariables.background.transparent.light};
|
|
border-radius: ${themeCssVariables.border.radius.sm};
|
|
color: ${({ iconColor }) => iconColor ?? ''};
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
justify-content: center;
|
|
padding: ${themeCssVariables.spacing[1]};
|
|
`;
|
|
|
|
export const StyledPageInfoTextContainer = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 1;
|
|
gap: ${themeCssVariables.spacing[0.5]};
|
|
min-width: 0;
|
|
`;
|
|
|
|
export const StyledPageInfoTitleContainer = styled.div`
|
|
font-size: ${themeCssVariables.font.size.md};
|
|
font-weight: ${themeCssVariables.font.weight.semiBold};
|
|
padding-inline: ${themeCssVariables.spacing[1]};
|
|
min-width: 0;
|
|
max-width: 150px;
|
|
`;
|
|
|
|
export const StyledPageInfoLabel = styled.div`
|
|
color: ${themeCssVariables.font.color.tertiary};
|
|
font-size: ${themeCssVariables.font.size.sm};
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
`;
|
|
|
|
type CommandMenuPageInfoLayoutProps = {
|
|
icon?: ReactNode;
|
|
iconColor?: string;
|
|
title: ReactNode;
|
|
label?: ReactNode;
|
|
};
|
|
|
|
export const CommandMenuPageInfoLayout = ({
|
|
icon,
|
|
iconColor,
|
|
title,
|
|
label,
|
|
}: CommandMenuPageInfoLayoutProps) => {
|
|
return (
|
|
<StyledPageInfoContainer>
|
|
{icon && (
|
|
<StyledPageInfoIcon iconColor={iconColor}>{icon}</StyledPageInfoIcon>
|
|
)}
|
|
<StyledPageInfoTextContainer>
|
|
<StyledPageInfoTitleContainer>{title}</StyledPageInfoTitleContainer>
|
|
{label && <StyledPageInfoLabel>{label}</StyledPageInfoLabel>}
|
|
</StyledPageInfoTextContainer>
|
|
</StyledPageInfoContainer>
|
|
);
|
|
};
|