+
+ );
+}
diff --git a/examples/pigment-css-nextjs-ts/src/augment.d.ts b/examples/pigment-css-nextjs-ts/src/augment.d.ts
new file mode 100644
index 00000000000000..d10b46e01d4da0
--- /dev/null
+++ b/examples/pigment-css-nextjs-ts/src/augment.d.ts
@@ -0,0 +1,19 @@
+import type {} from '@pigment-css/react/theme';
+import type { ExtendTheme } from '@pigment-css/react';
+
+declare module '@pigment-css/react/theme' {
+ export interface ThemeArgs {
+ theme: ExtendTheme<{
+ colorScheme: 'light' | 'dark';
+ tokens: {
+ palette: {
+ background: string;
+ foreground: string;
+ primary: string;
+ primaryForeground: string;
+ border: string;
+ };
+ };
+ }>;
+ }
+}
diff --git a/examples/pigment-css-nextjs-ts/tsconfig.json b/examples/pigment-css-nextjs-ts/tsconfig.json
new file mode 100644
index 00000000000000..6a9c1a2e7a02a6
--- /dev/null
+++ b/examples/pigment-css-nextjs-ts/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}
diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md
index afca1fa7e9e461..358a92fc19ba1f 100644
--- a/packages/pigment-react/README.md
+++ b/packages/pigment-react/README.md
@@ -37,6 +37,17 @@ Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling us
### Next.js
+#### Starter template
+
+Use the following commands to create a new Next.js project with Pigment CSS set up:
+
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-nextjs-ts
+cd pigment-css-nextjs-ts
+```
+
+#### Manual installation
+
```bash
npm install @pigment-css/react
npm install --save-dev @pigment-css/nextjs-plugin
@@ -52,6 +63,26 @@ module.exports = withPigment({
});
```
+Finally, import the stylesheet in the root `layout.tsx` file:
+
+```diff
+ import type { Metadata } from 'next';
++import '@mui/zero-runtime/styles.css';
+
+ export const metadata: Metadata = {
+ title: 'Create Next App',
+ description: 'Generated by create next app',
+ };
+
+ export default function RootLayout(props: { children: React.ReactNode }) {
+ return (
+
+ {props.children}
+
+ );
+ }
+```
+
### Vite
```bash
@@ -72,6 +103,24 @@ export default defineConfig({
});
```
+Finally, import the stylesheet in the root `main.tsx` file:
+
+```diff
+ import * as React from 'react';
+ import { createRoot } from 'react-dom/client';
++import '@mui/zero-runtime/styles.css';
+ import App from './App';
+
+ const rootElement = document.getElementById('root');
+ const root = createRoot(rootElement);
+
+ root.render(
+
+
+ ,
+ );
+```
+
## Basic usage
> You must configure Pigment CSS with [Next.js](#nextjs) or [Vite](#vite) first.
@@ -306,6 +355,52 @@ const Heading = styled('h1')<{ isError?: boolean }>({
});
```
+### Creating animation keyframes
+
+Use the `keyframes` API to create reusable [animation keyframes](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes):
+
+```js
+import { keyframes } from '@mui/zero-runtime';
+
+const fadeIn = keyframes`
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+`;
+
+function Example1() {
+ return
I am invisible
;
+}
+```
+
+The call to the `keyframes` function will be replaced with a unique string that represents the CSS animation name. It can be used with `css` or `styled` too.
+
+```js
+import { css, styled, keyframes } from '@mui/zero-runtime';
+
+const fadeIn = keyframes(...);
+
+const Example2 = styled('div')({
+ animation: `${fadeIn} 0.5s`,
+});
+
+function App() {
+ return (
+ <>
+
+
+
+ )
+}
+```
+
### Theming
Theming is an **optional** feature that lets you reuse the same values, such as colors, spacing, and typography, across your application. It is a plain object of any structure that you can define in your config file.
@@ -454,6 +549,21 @@ function App() {
}
```
+#### Styling based on color scheme
+
+The `extendTheme` utility attach a function called `applyStyles` to the theme object. It receives a color scheme as the first argument followed by a style object. It will return a proper CSS selector based on the theme configuration.
+
+```jsx
+const Heading = styled('h1')(({ theme }) => ({
+ color: theme.colors.primary,
+ fontSize: theme.spacing.unit * 4,
+ fontFamily: theme.typography.fontFamily,
+ ...theme.applyStyles('dark', {
+ color: theme.colors.primaryLight,
+ }),
+}));
+```
+
#### CSS variables prefix
You can add a prefix to the generated CSS variables by providing a `cssVarPrefix` option to the `extendTheme` utility: