init project

examples/material-ui-pigment-css-nextjs-ts/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+# next-env.d.ts

examples/material-ui-pigment-css-nextjs-ts/README.md

@@ -0,0 +1,47 @@
+# Material UI x Pigment CSS - Next.js App Router example in TypeScript
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with Material UI installed.
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #target-branch-reference -->
+
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/material-ui-pigment-css-nextjs-ts
+cd material-ui-pigment-css-nextjs-ts
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+or:
+
+<!-- #target-branch-reference -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-pigment-css-nextjs-ts)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-pigment-css-nextjs-ts)
+
+## Learn more
+
+To learn more about this example:
+
+<!-- #host-reference -->
+
+- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Customizing Material UI](https://mui.com/material-ui/customization/how-to-customize/) - approaches to customizing Material UI.
+
+## What's next?
+
+<!-- #host-reference -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.

examples/material-ui-pigment-css-nextjs-ts/next.config.mjs

@@ -0,0 +1,18 @@
+import { withPigment } from '@pigment-css/nextjs-plugin';
+import { createTheme } from '@mui/material';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default withPigment(nextConfig, {
+  theme: createTheme({
+    cssVariables: {
+      colorSchemeSelector: 'class',
+    },
+    colorSchemes: { light: true, dark: true },
+    typography: {
+      fontFamily: 'var(--font-roboto)',
+    },
+  }),
+  transformLibraries: ['@mui/material'],
+});

examples/material-ui-pigment-css-nextjs-ts/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "material-ui-pigment-css-nextjs-ts",
+  "version": "7.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@mui/material": "latest",
+    "@mui/material-pigment-css": "latest",
+    "@pigment-css/react": "latest",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "devDependencies": {
+    "@pigment-css/nextjs-plugin": "latest",
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "eslint": "latest",
+    "eslint-config-next": "latest",
+    "typescript": "latest"
+  }
+}

examples/material-ui-pigment-css-nextjs-ts/src/app/layout.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import { cookies } from 'next/headers';
+import '@mui/material-pigment-css/styles.css';
+import { ColorSchemeProvider } from '../components/ColorSchemeProvider';
+import App from '../components/App';
+
+export const metadata: Metadata = {
+  title: 'Material UI x Pigment CSS',
+  description: 'Generated by create next app',
+};
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const cookieStore = await cookies();
+  const { value: colorScheme = 'light' } = cookieStore.get('colorScheme') ?? {};
+  return (
+    <html lang="en">
+      <ColorSchemeProvider colorScheme={colorScheme}>
+        <App>{children}</App>
+      </ColorSchemeProvider>
+    </html>
+  );
+}

examples/material-ui-pigment-css-nextjs-ts/src/app/page.tsx

@@ -0,0 +1,136 @@
+'use client';
+import * as React from 'react';
+import DefaultPropsProvider from '@mui/material/DefaultPropsProvider';
+import CssBaseline from '@mui/material/CssBaseline';
+import IconButton from '@mui/material/IconButton';
+import Container from '@mui/material-pigment-css/Container';
+import Grid from '@mui/material-pigment-css/Grid';
+import Stack from '@mui/material-pigment-css/Stack';
+import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
+import { styled } from '@mui/material-pigment-css';
+import { useColorScheme } from '../components/ColorSchemeProvider';
+
+const Title = styled('div')(({ theme }) => ({
+  color: theme.vars.palette.text.primary,
+  font: theme.vars.font.body1,
+  fontSize: '1.125rem',
+  lineHeight: 1.7,
+}));
+
+export default function Home() {
+  const { colorScheme, setColorScheme } = useColorScheme();
+
+  const toggleColorScheme = () => {
+    setColorScheme(colorScheme === 'dark' ? 'light' : 'dark');
+  };
+
+  return (
+    <main sx={{ minHeight: '100lvh', display: 'grid', placeItems: 'center' }}>
+      <DefaultPropsProvider
+        value={{
+          MuiChip: {
+            label: 'Available in v6',
+          },
+        }}
+      >
+        <CssBaseline />
+        <Container>
+          <div sx={{ position: 'absolute', top: 10, right: 10 }}>
+            <IconButton sx={{ fontSize: 20, px: 1.5 }} onClick={toggleColorScheme}>
+              {colorScheme === 'light' ? '🌙' : '🔆'}
+            </IconButton>
+          </div>
+          <Grid container spacing={{ xs: 2, sm: 3, md: 4 }}>
+            <Grid size={{ xs: 12, md: 6 }} sx={{ pl: 4.5 }}>
+              <Chip
+                sx={(theme) => ({
+                  mb: 2,
+                  fontWeight: 600,
+                  bgcolor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
+                  color: 'primary.dark',
+                })}
+              />
+              <Typography
+                variant="h1"
+                sx={{
+                  fontWeight: 500,
+                  fontSize: 'clamp(3rem, 2.354rem + 2.7562vw, 5rem)',
+                  textWrap: 'balance',
+                  letterSpacing: '-0.025em',
+                }}
+              >
+                <span
+                  sx={(theme) => ({
+                    display: 'block',
+                    background: `linear-gradient(145deg, ${
+                      (theme.vars || theme).palette.primary.light
+                    } 5%, ${(theme.vars || theme).palette.primary.dark} 90%)`,
+                    // `Webkit` has to come later
+                    WebkitBackgroundClip: 'text',
+                    WebkitTextFillColor: 'transparent',
+                  })}
+                >
+                  Material UI
+                </span>
+                Pigment CSS
+              </Typography>
+            </Grid>
+            <Grid size={{ xs: 12, md: 6 }}>
+              <Stack
+                component="ul"
+                spacing={3}
+                sx={{
+                  m: 0,
+                  pl: 3,
+                  color: 'text.secondary',
+                  '& li': {
+                    pl: 2,
+                    fontSize: '1.125rem',
+                    fontWeight: 500,
+                    '&::marker': {
+                      color: 'text.primary',
+                    },
+                  },
+                }}
+              >
+                <li
+                  sx={{
+                    '&::marker': { content: '"⚡️"' },
+                  }}
+                >
+                  <Title>Build-time CSS Extraction</Title>
+                  <Typography>
+                    Pigment CSS looks through Material UI components used in the project and
+                    extracts the styles into plain CSS.
+                  </Typography>
+                </li>
+                <li
+                  sx={{
+                    '&::marker': { content: '"🚀"' },
+                  }}
+                >
+                  <Title>React Server Components</Title>
+                  <Typography>
+                    Material UI provides a set of layout components that integrate with Pigment CSS
+                    to support React Server Components.
+                  </Typography>
+                </li>
+                <li
+                  sx={{
+                    '&::marker': { content: '"📦"' },
+                  }}
+                >
+                  <Title>Emotionless</Title>
+                  <Typography>
+                    Replacing Emotion with Pigment CSS eliminates ~15kB from the final bundle.
+                  </Typography>
+                </li>
+              </Stack>
+            </Grid>
+          </Grid>
+        </Container>
+      </DefaultPropsProvider>
+    </main>
+  );
+}

examples/material-ui-pigment-css-nextjs-ts/src/components/App.tsx

@@ -0,0 +1,18 @@
+'use client';
+import * as React from 'react';
+import { Roboto } from 'next/font/google';
+import { useColorScheme } from './ColorSchemeProvider';
+
+const roboto = Roboto({
+  subsets: ['latin'],
+  weight: ['400', '500', '700'],
+  display: 'swap',
+  variable: '--font-roboto',
+});
+
+function App({ className, ...other }: React.PropsWithChildren<{ className?: string }>) {
+  const { colorScheme } = useColorScheme();
+  return <body {...other} className={`${roboto.variable} ${colorScheme}`} />;
+}
+
+export default App;

examples/material-ui-pigment-css-nextjs-ts/src/components/ColorSchemeProvider.tsx

@@ -0,0 +1,63 @@
+'use client';
+import * as React from 'react';
+
+const ColorSchemeContext = React.createContext<{
+  colorScheme: string;
+  setColorScheme: React.Dispatch<React.SetStateAction<string>>;
+}>({
+  colorScheme: 'dark',
+  setColorScheme: () => '',
+});
+
+function setCookie(name: string, value: string, days: number = 100) {
+  let expires = '';
+  if (days) {
+    const date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = `; expires=${date.toUTCString()}`;
+  }
+  document.cookie = `${name}=${value || ''}${expires}; path=/`;
+}
+
+export function ColorSchemeProvider({
+  colorScheme: initialColorScheme,
+  children,
+}: React.PropsWithChildren<{ colorScheme: string }>) {
+  const [colorScheme, setColorScheme] = React.useState<string>(initialColorScheme);
+
+  const contextValue = React.useMemo(
+    () => ({ colorScheme, setColorScheme }),
+    [colorScheme, setColorScheme],
+  );
+
+  // Set the colorScheme in localStorage
+  React.useEffect(() => {
+    setCookie('colorScheme', colorScheme);
+    localStorage.setItem('colorScheme', colorScheme);
+  }, [colorScheme]);
+
+  // Handle when localStorage has changed
+  React.useEffect(() => {
+    const handleStorage = (event: StorageEvent) => {
+      const value = event.newValue;
+      if (
+        typeof event.key === 'string' &&
+        event.key === 'colorScheme' &&
+        typeof value === 'string'
+      ) {
+        setColorScheme(value);
+      }
+    };
+    // For syncing color-scheme changes between iframes
+    window.addEventListener('storage', handleStorage);
+    return () => {
+      window.removeEventListener('storage', handleStorage);
+    };
+  }, [setColorScheme]);
+
+  return <ColorSchemeContext.Provider value={contextValue}>{children}</ColorSchemeContext.Provider>;
+}
+
+export const useColorScheme = () => {
+  return React.useContext(ColorSchemeContext);
+};

examples/material-ui-pigment-css-nextjs-ts/src/material-ui-pigment-css.d.ts

@@ -0,0 +1,19 @@
+import { Theme, SxProps } from '@mui/material/styles';
+import {} from '@mui/material/themeCssVarsAugmentation';
+
+declare module '@mui/material-pigment-css' {
+  interface ThemeArgs {
+    theme: Theme;
+  }
+}
+
+declare global {
+  namespace React {
+    interface HTMLAttributes {
+      sx?: SxProps<Theme>;
+    }
+    interface SVGProps {
+      sx?: SxProps<Theme>;
+    }
+  }
+}

examples/material-ui-pigment-css-nextjs-ts/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "target": "ES2017"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/material-ui-pigment-css.d.ts"
+  ],
+  "exclude": ["node_modules"]
+}