Load twenty-ui global styles in twenty-front Storybook (#21665)

Loads `twenty-ui/style.css` in twenty-front's Storybook preview,
matching the real app — `src/index.tsx` already imports it, but
`.storybook/preview.tsx` only loaded the deprecated stylesheet, so
Storybook rendered without twenty-ui's global `reset.scss`
(`*{box-sizing:border-box}` + a native `button` reset) that the
production app has.

This isolates the resulting box-model/button-reset baseline shift ahead
of the `twenty-ui-deprecated` removal PR. The Argos diff here is exactly
that global shift (Storybook catching up to how the app already renders)
and is expected — bulk-approve. Once this lands, the removal PR's Argos
will show only genuine deprecated→twenty-ui component diffs instead of
being buried under ~240 reset-driven diffs.

Only the reset applies in this PR: twenty-ui's component CSS targets
hashed module classes that don't exist in the deprecated-rendered
Storybook, and `reset.scss` is the only global selector twenty-ui emits.


<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21665?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

This commit is contained in:

Raphaël Bosi

2026-06-16 14:12:49 +02:00

committed by

GitHub

parent a67fdf2dac

commit e515f174a4

1 changed files with 1 additions and 0 deletions

									
										packages/twenty-front/.storybook/preview.tsx
									
		+1
		
												View File
												
				@@ -22,6 +22,7 @@ import 'react-loading-skeleton/dist/skeleton.css';

				import 'twenty-ui-deprecated/style.css';

				import 'twenty-ui-deprecated/theme-light.css';

				import 'twenty-ui-deprecated/theme-dark.css';

				import 'twenty-ui/style.css';

				import { ThemeProvider } from 'twenty-ui-deprecated/theme-constants';

				// oxlint-disable-next-line no-restricted-imports

				import { messages as enMessages } from '../src/locales/generated/en';