refactor: remove MUI and Emotion (#27821)

> 🤖 This PR was modified by Coder Agents on behalf of Jake Howell.

Until we meet again.

## Stack

- #27636
- #27718 
- #27719 
- #27722
- #27723
- #27724
- #27728
- #27730
- #27732
- #27762
- #27763
- #27786
- #27787
- #27788
- #27789
- #27790
- #27791 
- #27817 
- #27820
- #28009

## Final removal (`c39b664`)

Removes the last of MUI and Emotion now that every surface has been
migrated:

- **Dependencies**: drops `@mui/material` and
`@emotion/{cache,css,react,styled}` from `package.json` /
`pnpm-lock.yaml`, and deletes the `@types/emotion.d.ts` and
`@types/mui.d.ts` module augmentations.
- **Theming**: replaces the Emotion `CacheProvider`, MUI `ThemeProvider`
/ `StyledEngineProvider`, and `CssBaseline` in `ThemeProvider` with a
lightweight `theme/context.tsx` that exposes `ThemeContextProvider` and
a `useTheme` hook.
- **Global styles**: moves the base `body` styles (background, text
color, font, antialiasing) that `CssBaseline` previously provided into
`index.css`, and drops the temporary MUI modal/popover scrollbar-gutter
workaround.
- **Cleanup**: removes the MUI → shadcn / Emotion → Tailwind migration
guidance from `site/AGENTS.md`, updates the Storybook `preview.tsx`, and
adjusts assorted components (`Command`, `Slider`, `Switch`, `Tabs`,
`SyntaxHighlighter`, timing charts) and theme files to consume the new
context instead of MUI/Emotion.
This commit is contained in:
Jake Howell
2026-08-17 14:04:48 +07:00
committed by GitHub
parent 521c383f6b
commit ea8ba0c678
56 changed files with 198 additions and 1305 deletions
+4 -9
View File
@@ -182,14 +182,6 @@ Components should be atomic, reusable and free of business logic. Modules are
similar to components except that they can be more complex and can contain
business logic specific to the product.
### MUI
The codebase is currently using MUI v5. Please see the
[official documentation](https://mui.com/material-ui/getting-started/). In
general, favor building a custom component via MUI instead of plain React/HTML,
as MUI's suite of components is thoroughly battle-tested and accessible right
out of the box.
### Structure
Each component and module gets its own folder. Module folders may group multiple
@@ -246,7 +238,10 @@ new conventions, but all new components should follow these guidelines.
## Styling
We use [Emotion](https://emotion.sh/) to handle CSS styles.
We use [Tailwind CSS](https://tailwindcss.com/) to handle CSS styles. Reusable UI
primitives come from [shadcn/ui](https://ui.shadcn.com/) components in
`site/src/components`. Use the `cn` helper from `#/utils/cn` to compose and
conditionally apply classes.
## Forms