houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0223975bbdbcb3a5e2bb2c538c844195fbace4b2
twenty/packages/twenty-ui/package.json
T
Charles Bochet 1db2a40961 Migrate twenty ui to linaria (#18307) 
## Migrate twenty-ui from Emotion to Linaria

Completes the migration of all `twenty-ui` components from Emotion
(runtime CSS-in-JS) to Linaria (zero-runtime, CSS extracted at build
time).

- Replaced `@emotion/styled` with `@linaria/react` across ~170 files
- Removed all Emotion dependencies from `twenty-ui`
- Introduced a CSS custom properties-based theme system:
`themeCssVariables` where every leaf is a `var(--t-xxx)` reference,
injected onto `document.documentElement` by
`ThemeCssVariableInjectorEffect`
- No more `theme` prop threading — styled components reference
`themeCssVariables.x.y` directly at build time
- Updated `twenty-front` consumers to remove `theme={theme}` prop
passing

**Before / After:**
```tsx
// Emotion
color: ${({ theme }) => theme.font.color.primary};
padding: ${({ theme }) => theme.spacing(4)};

// Linaria
color: ${themeCssVariables.font.color.primary};
padding: ${themeCssVariables.spacing[4]};
```

### Theme architecture

Two build-time utilities produce the theme system:

- **`buildThemeReferencingRootCssVariables`** — walks the theme object
and builds a nested mirror where every leaf is a `var(--t-xxx)` string
(evaluated at build time by wyw-in-js)
- **`prepareThemeForRootCssVariableInjection`** — walks the runtime
theme and collects flat `[--css-variable-name, value]` pairs, injected
onto `document.documentElement` by `ThemeCssVariableInjectorEffect`

Both share naming conventions (`camelToKebab`, `SPACING_VALUES`,
`formatSpacingKey`) and are unit tested.

### Spacing cleanup

Spacing scale now uses integers 0–32 (generated via loop), with `0.5`
and `1.5` as the only fractional exceptions. All other fractional
spacing usages (`0.25`, `0.75`, `1.25`, `2.5`, `3.5`) were replaced with
literal pixel values across ~20 twenty-front files.

### Framer Motion integration

Linaria doesn't support `styled(motion.div)` — wrapping a motion element
with `styled()` causes the component body to be stripped at build time.
Instead, we define the styled component first, then wrap it with
`motion.create()`:

```tsx
const StyledBarBase = styled.div`
  background-color: ${themeCssVariables.font.color.primary};
  height: 100%;
`;

const StyledBar = motion.create(StyledBarBase);
```

### Block interpolations

Linaria doesn't support interpolations that return multiple CSS
declarations (Linaria wraps the entire block in a single `var()`,
producing invalid CSS). These were split into individual property
interpolations:

```tsx
// Emotion — single interpolation returning multiple declarations
border-left: ${({ divider, theme }) => {
  const border = `1px solid ${theme.border.color.light}`;
  return divider ? `border-${divider}: ${border}` : '';
}}

// Linaria — one interpolation per property
border-left: ${({ divider }) =>
  divider === 'left' ? `1px solid ${themeCssVariables.border.color.light}` : 'none'};
border-right: ${({ divider }) =>
  divider === 'right' ? `1px solid ${themeCssVariables.border.color.light}` : 'none'};
```

### Dynamic styles via CSS variables

When a component needs to compute styles from multiple props with
complex branching logic (e.g. `Button` combining `variant`, `accent`,
`inverted`, `disabled`, `focus`, `position`), Linaria's prop
interpolations become unwieldy. In those cases we use a
`computeDynamicStyles` function that returns a `CSSProperties` object
injected via `style={}`, referenced from the static CSS with `var()`:

```tsx
const StyledButton = styled.button`
  background: var(--btn-bg);
  border-color: var(--btn-border-color);
  &:hover { background: var(--btn-hover-bg); }
`;

const dynamicStyles = useMemo(() => {
  const s = computeButtonDynamicStyles(variant, accent, ...);
  return { '--btn-bg': s.background, '--btn-hover-bg': s.hoverBackground } as CSSProperties;
}, [variant, accent, ...]);

return <StyledButton style={dynamicStyles} />;
```

### CSS var + unit concatenation

CSS custom properties can't be concatenated with unit suffixes directly
(`var(--x)px` is invalid). Values that need units use `calc()`:

```tsx
// Broken
transition: background ${themeCssVariables.animation.duration.instant}s ease;

// Fixed
transition: background calc(${themeCssVariables.animation.duration.instant} * 1s) ease;
```
2026-03-01 15:13:42 +01:00

175 lines
4.3 KiB
JSON
Raw Blame History

{
"name": "twenty-ui",
"private": true,
"main": "dist/index.cjs",
"module": "dist/index.mjs",
"style": "./dist/style.css",
"type": "module",
"sideEffects": [
"**/*.css"
],
"devDependencies": {
"@babel/preset-env": "^7.26.9",
"@babel/preset-react": "^7.26.3",
"@prettier/sync": "^0.5.2",
"@types/babel__preset-env": "^7",
"@types/react": "^18.2.39",
"@types/react-dom": "^18.2.15",
"@wyw-in-js/babel-preset": "^0.6.0",
"babel-plugin-inline-import": "^3.0.0",
"babel-plugin-inline-react-svg": "^2.0.2",
"babel-plugin-module-resolver": "^5.0.2",
"tsx": "^4.19.3",
"vite-plugin-checker": "^0.10.2",
"vite-plugin-dts": "3.8.1",
"vite-plugin-svgr": "^4.3.0"
},
"dependencies": {
"@linaria/react": "^6.2.1",
"@monaco-editor/react": "^4.7.0",
"@sniptt/guards": "^0.2.0",
"@tabler/icons-react": "^3.31.0",
"date-fns": "^2.30.0",
"framer-motion": "^11.18.0",
"glob": "^11.1.0",
"hex-rgb": "^5.0.0",
"jotai": "^2.17.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-responsive": "^9.0.2",
"react-router-dom": "^6.4.4",
"react-tooltip": "^5.13.1",
"twenty-shared": "workspace:*",
"zod": "^4.1.11"
},
"peerDependencies": {
"monaco-editor": ">= 0.25.0 < 1"
},
"scripts": {
"build": "npx vite build"
},
"files": [
"dist",
"accessibility",
"assets",
"components",
"display",
"feedback",
"input",
"json-visualizer",
"layout",
"navigation",
"testing",
"theme",
"utilities"
],
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs",
"require": "./dist/index.cjs"
},
"./style.css": "./dist/style.css",
"./accessibility": {
"types": "./dist/accessibility/index.d.ts",
"import": "./dist/accessibility.mjs",
"require": "./dist/accessibility.cjs"
},
"./assets": {
"types": "./dist/assets/index.d.ts",
"import": "./dist/assets.mjs",
"require": "./dist/assets.cjs"
},
"./components": {
"types": "./dist/components/index.d.ts",
"import": "./dist/components.mjs",
"require": "./dist/components.cjs"
},
"./display": {
"types": "./dist/display/index.d.ts",
"import": "./dist/display.mjs",
"require": "./dist/display.cjs"
},
"./feedback": {
"types": "./dist/feedback/index.d.ts",
"import": "./dist/feedback.mjs",
"require": "./dist/feedback.cjs"
},
"./input": {
"types": "./dist/input/index.d.ts",
"import": "./dist/input.mjs",
"require": "./dist/input.cjs"
},
"./json-visualizer": {
"types": "./dist/json-visualizer/index.d.ts",
"import": "./dist/json-visualizer.mjs",
"require": "./dist/json-visualizer.cjs"
},
"./layout": {
"types": "./dist/layout/index.d.ts",
"import": "./dist/layout.mjs",
"require": "./dist/layout.cjs"
},
"./navigation": {
"types": "./dist/navigation/index.d.ts",
"import": "./dist/navigation.mjs",
"require": "./dist/navigation.cjs"
},
"./testing": {
"types": "./dist/testing/index.d.ts",
"import": "./dist/testing.mjs",
"require": "./dist/testing.cjs"
},
"./theme": {
"types": "./dist/theme/index.d.ts",
"import": "./dist/theme.mjs",
"require": "./dist/theme.cjs"
},
"./utilities": {
"types": "./dist/utilities/index.d.ts",
"import": "./dist/utilities.mjs",
"require": "./dist/utilities.cjs"
}
},
"typesVersions": {
"*": {
"accessibility": [
"dist/accessibility/index.d.ts"
],
"assets": [
"dist/assets/index.d.ts"
],
"components": [
"dist/components/index.d.ts"
],
"display": [
"dist/display/index.d.ts"
],
"feedback": [
"dist/feedback/index.d.ts"
],
"input": [
"dist/input/index.d.ts"
],
"json-visualizer": [
"dist/json-visualizer/index.d.ts"
],
"layout": [
"dist/layout/index.d.ts"
],
"navigation": [
"dist/navigation/index.d.ts"
],
"testing": [
"dist/testing/index.d.ts"
],
"theme": [
"dist/theme/index.d.ts"
],
"utilities": [
"dist/utilities/index.d.ts"
]
}
}
}
Reference in New Issue View Git Blame Copy Permalink