Charles Bochet
c4140f85df
## Emotion → Linaria migration — PR 1 of 10
First batch of the `twenty-front` migration from Emotion (runtime
CSS-in-JS) to Linaria (zero-runtime, build-time extraction via
wyw-in-js). Covers **100 files** across 10 small standalone modules —
chosen as the lowest-risk starting point.
### Modules migrated
spreadsheet-import (28) · navigation-menu-item (17) · views (14) ·
billing (10) · blocknote-editor (7) · advanced-text-editor (7) ·
favorites (7) · navigation (4) · information-banner (3) ·
sign-in-background-mock (3)
### Migration pattern
Every file follows the same mechanical transformation:
| Emotion | Linaria |
|---|---|
| `import styled from '@emotion/styled'` | `import { styled } from
'@linaria/react'` |
| `${({ theme }) => theme.font.color.primary}` |
`${themeCssVariables.font.color.primary}` |
| `${({ theme }) => theme.spacing(4)}` |
`${themeCssVariables.spacing[4]}` |
| `const theme = useTheme()` | `const { theme } =
useContext(ThemeContext)` |
| `import { type Theme } from '@emotion/react'` | `import { type
ThemeType } from 'twenty-ui/theme'` |
`themeCssVariables` is a build-time object where every leaf is a
`var(--t-xxx)` CSS custom property reference, evaluated statically by
wyw-in-js. Runtime theme access (icon sizes, colors passed as props)
uses `useContext(ThemeContext)`.
### Gotchas encountered & fixed
- **Interpolation return types** — wyw-in-js requires `string | number`,
never `false`/`undefined`. Replaced `condition && 'css'` with `condition
? 'css' : ''`.
- **`css` tag inside `styled` templates** — Linaria `css` returns a
class name, not CSS text. Replaced with plain template strings.
- **`styled(Component)` needs `className`** — added `className` prop to
`NavigationDrawerSection`, `DropdownMenuItemsContainer`, and `Heading`.
- **`shouldForwardProp` not supported** — Linaria filters invalid DOM
props automatically for HTML elements. For custom components, used
wrapper divs where needed.
- **`FormFieldPlaceholderStyles`** — converted from Emotion `css`
function to a static string using `themeCssVariables`.
110 lines
2.8 KiB
TypeScript
110 lines
2.8 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
import { type IconComponent } from '@ui/display';
|
|
import { ThemeContext } from '@ui/theme';
|
|
import { themeCssVariables } from '@ui/theme-constants';
|
|
import { type MouseEvent, useContext } from 'react';
|
|
|
|
export type LightButtonAccent = 'secondary' | 'tertiary';
|
|
|
|
export type LightButtonProps = {
|
|
className?: string;
|
|
Icon?: IconComponent;
|
|
title?: string;
|
|
accent?: LightButtonAccent;
|
|
active?: boolean;
|
|
disabled?: boolean;
|
|
focus?: boolean;
|
|
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
type?: React.ComponentProps<'button'>['type'];
|
|
};
|
|
|
|
const StyledButton = styled.button<
|
|
Pick<LightButtonProps, 'accent' | 'active' | 'focus'>
|
|
>`
|
|
align-items: center;
|
|
background: transparent;
|
|
border: ${({ focus }) =>
|
|
focus ? `1px solid ${themeCssVariables.color.blue}` : 'none'};
|
|
|
|
border-radius: ${themeCssVariables.border.radius.sm};
|
|
box-shadow: ${({ focus }) =>
|
|
focus ? `0 0 0 3px ${themeCssVariables.color.blue3}` : 'none'};
|
|
color: ${({ accent, active, disabled, focus }) => {
|
|
switch (accent) {
|
|
case 'secondary':
|
|
return active || focus
|
|
? themeCssVariables.color.blue
|
|
: !disabled
|
|
? themeCssVariables.font.color.secondary
|
|
: themeCssVariables.font.color.extraLight;
|
|
case 'tertiary':
|
|
return active || focus
|
|
? themeCssVariables.color.blue
|
|
: !disabled
|
|
? themeCssVariables.font.color.tertiary
|
|
: themeCssVariables.font.color.extraLight;
|
|
}
|
|
return '';
|
|
}};
|
|
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
font-family: ${themeCssVariables.font.family};
|
|
font-weight: ${themeCssVariables.font.weight.regular};
|
|
gap: ${themeCssVariables.spacing[1]};
|
|
height: 24px;
|
|
padding: 0 ${themeCssVariables.spacing[2]};
|
|
|
|
transition: background 0.1s ease;
|
|
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background: ${({ disabled }) =>
|
|
!disabled
|
|
? themeCssVariables.background.transparent.light
|
|
: 'transparent'};
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:active {
|
|
background: ${({ disabled }) =>
|
|
!disabled
|
|
? themeCssVariables.background.transparent.medium
|
|
: 'transparent'};
|
|
}
|
|
`;
|
|
|
|
export const LightButton = ({
|
|
className,
|
|
Icon,
|
|
title,
|
|
active = false,
|
|
accent = 'secondary',
|
|
disabled = false,
|
|
focus = false,
|
|
type = 'button',
|
|
onClick,
|
|
}: LightButtonProps) => {
|
|
const { theme } = useContext(ThemeContext);
|
|
|
|
return (
|
|
<StyledButton
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
focus={focus && !disabled}
|
|
type={type}
|
|
accent={accent}
|
|
className={className}
|
|
active={active}
|
|
>
|
|
{!!Icon && <Icon size={theme.icon.size.md} />}
|
|
{title}
|
|
</StyledButton>
|
|
);
|
|
};
|