diff --git a/examples/pigment-css-nextjs-ts/.gitignore b/examples/pigment-css-nextjs-ts/.gitignore
deleted file mode 100644
index 28c8a5adb7c034..00000000000000
--- a/examples/pigment-css-nextjs-ts/.gitignore
+++ /dev/null
@@ -1,36 +0,0 @@
-# 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
diff --git a/examples/pigment-css-nextjs-ts/README.md b/examples/pigment-css-nextjs-ts/README.md
deleted file mode 100644
index a8a18cd92a5f6b..00000000000000
--- a/examples/pigment-css-nextjs-ts/README.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# Pigment CSS - Next.js App Router with TypeScript example project
-
-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 TypeScript and Pigment CSS, a zero-runtime CSS-in-JS library, installed.
-
-## How to use
-
-Download the example [or clone the repo](https://github.com/mui/material-ui):
-
-
-
-```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
-```
-
-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:
-
-
-
-[](https://stackblitz.com/github/mui/material-ui/tree/master/examples/pigment-css-nextjs-ts)
-
-[](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/pigment-css-nextjs-ts)
-
-## Learn more
-
-To learn more about this example:
-
-- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-css-react/README.md) - learn more about Pigment CSS features and APIs.
-- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and APIs.
diff --git a/examples/pigment-css-nextjs-ts/next-env.d.ts b/examples/pigment-css-nextjs-ts/next-env.d.ts
deleted file mode 100644
index 4f11a03dc6cc37..00000000000000
--- a/examples/pigment-css-nextjs-ts/next-env.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-///
-///
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/pigment-css-nextjs-ts/next.config.js b/examples/pigment-css-nextjs-ts/next.config.js
deleted file mode 100644
index 2196cab8c75dda..00000000000000
--- a/examples/pigment-css-nextjs-ts/next.config.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const { withPigment, extendTheme } = require('@pigment-css/nextjs-plugin');
-
-// To learn more about theming, visit https://github.com/mui/material-ui/blob/master/packages/zero-runtime/README.md#theming
-const theme = extendTheme({
- colorSchemes: {
- light: {
- palette: {
- background: '0 0% 100%',
- foreground: '240 10% 3.9%',
- primary: '240 5.9% 10%',
- border: '240 5.9% 90%',
- },
- },
- dark: {
- palette: {
- background: '240 10% 3.9%',
- foreground: '0 0% 80%',
- primary: '0 0% 98%',
- border: '240 3.7% 15.9%',
- },
- },
- },
-});
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
-
-module.exports = withPigment(nextConfig, { theme });
diff --git a/examples/pigment-css-nextjs-ts/package.json b/examples/pigment-css-nextjs-ts/package.json
deleted file mode 100644
index b2579629a61906..00000000000000
--- a/examples/pigment-css-nextjs-ts/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "name": "pigment-css-nextjs-ts",
- "version": "5.0.0",
- "private": true,
- "scripts": {
- "dev": "next dev",
- "build": "next build",
- "start": "next start",
- "lint": "next lint",
- "post-update": "echo \"codesandbox preview only, need an update\" && pnpm update --latest"
- },
- "dependencies": {
- "@pigment-css/react": "latest",
- "react": "latest",
- "react-dom": "latest",
- "next": "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"
- }
-}
diff --git a/examples/pigment-css-nextjs-ts/public/.gitkeep b/examples/pigment-css-nextjs-ts/public/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6..00000000000000
diff --git a/examples/pigment-css-nextjs-ts/src/app/favicon.ico b/examples/pigment-css-nextjs-ts/src/app/favicon.ico
deleted file mode 100644
index e19f48f591206d..00000000000000
Binary files a/examples/pigment-css-nextjs-ts/src/app/favicon.ico and /dev/null differ
diff --git a/examples/pigment-css-nextjs-ts/src/app/globals.css b/examples/pigment-css-nextjs-ts/src/app/globals.css
deleted file mode 100644
index 3dd82369c1b57d..00000000000000
--- a/examples/pigment-css-nextjs-ts/src/app/globals.css
+++ /dev/null
@@ -1,10 +0,0 @@
-* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
-}
-
-a {
- color: inherit;
- text-decoration: none;
-}
diff --git a/examples/pigment-css-nextjs-ts/src/app/layout.tsx b/examples/pigment-css-nextjs-ts/src/app/layout.tsx
deleted file mode 100644
index fb3a3b8adb2db7..00000000000000
--- a/examples/pigment-css-nextjs-ts/src/app/layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react';
-import type { Metadata } from 'next';
-import '@pigment-css/react/styles.css';
-import { css } from '@pigment-css/react';
-
-import './globals.css';
-
-export const metadata: Metadata = {
- title: 'Create Next App',
- description: 'Generated by create next app',
-};
-
-export default function RootLayout(props: { children: React.ReactNode }) {
- return (
-
- ({
- color: 'hsl(var(--palette-foreground))',
- backgroundColor: 'hsl(var(--palette-background))',
- fontFamily:
- "system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
- ...theme.applyStyles('dark', {
- colorScheme: 'dark',
- }),
- }))}
- >
- {props.children}
-
-
- );
-}
diff --git a/examples/pigment-css-nextjs-ts/src/app/page.tsx b/examples/pigment-css-nextjs-ts/src/app/page.tsx
deleted file mode 100644
index d900930fddd997..00000000000000
--- a/examples/pigment-css-nextjs-ts/src/app/page.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import * as React from 'react';
-import { styled, css, keyframes } from '@pigment-css/react';
-
-const scale = keyframes({
- to: { scale: 'var(--s2)' },
-});
-
-const Link = styled('a', { shouldForwardProp: (prop) => prop !== 'outlined' })<{
- outlined?: boolean;
-}>(({ theme }) => ({
- fontSize: '1rem',
- background: 'rgba(0 0 0 / 0.04)',
- padding: '0.8rem 1rem',
- letterSpacing: '1px',
- borderRadius: '8px',
- textAlign: 'center',
- ...theme.applyStyles('dark', {
- background: 'rgba(255 255 255 / 0.1)',
- }),
- variants: [
- {
- props: { outlined: true },
- style: {
- background: 'transparent',
- color: `hsl(${theme.vars.palette.primary})`,
- border: `1px solid hsl(${theme.vars.palette.border})`,
- },
- },
- ],
-}));
-
-const Bubble = styled('span')({
- height: 'var(--size, 100%)',
- aspectRatio: '1',
- background: 'radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%)',
- position: 'absolute',
- display: 'inline-block',
- left: 'var(--x, 0)',
- top: 'var(--y, 0)',
- scale: '0',
- translate: '-50% -50%',
- mixBlendMode: 'multiply',
- filter: 'blur(2px)',
- animation: `${scale} var(--s, 2s) var(--d, 0s) infinite alternate`,
-});
-
-function randomBetween(min: number, max: number) {
- return Math.floor(Math.random() * (max - min + 1) + min);
-}
-function generateBubbleVars() {
- return `
- --x: ${randomBetween(10, 90)}%;
- --y: ${randomBetween(15, 85)}%;
- --h: ${randomBetween(0, 360)};
- --s2: ${randomBetween(2, 6)};
- --d: -${randomBetween(250, 400) / 1000}s;
- --s: ${randomBetween(3, 6)}s;
- `;
-}
-
-export default function Home() {
- return (
-
- ({
- fontFamily: 'system-ui, sans-serif',
- fontSize: '4rem',
- fontWeight: 500,
- textAlign: 'center',
- position: 'relative',
- display: 'flex',
- alignItems: 'center',
- color: '#888',
- marginBottom: '1rem',
- ...theme.applyStyles('dark', { color: '#fff' }),
- }))}`}
- >
- Pigment CSS
- ({
- position: 'absolute',
- inset: '0',
- background: 'white',
- mixBlendMode: 'color-burn',
- overflow: 'hidden',
- pointerEvents: 'none',
- ...theme.applyStyles('dark', {
- mixBlendMode: 'darken',
- filter: 'brightness(2)',
- }),
- }))}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
- CSS-in-JS library with static extraction
-
-
- *': { flex: 'auto' },
- })}
- >
-
- Documentation
-
-
- Roadmap
-
-
-
- );
-}
diff --git a/examples/pigment-css-nextjs-ts/src/augment.d.ts b/examples/pigment-css-nextjs-ts/src/augment.d.ts
deleted file mode 100644
index d10b46e01d4da0..00000000000000
--- a/examples/pigment-css-nextjs-ts/src/augment.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-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
deleted file mode 100644
index 6a9c1a2e7a02a6..00000000000000
--- a/examples/pigment-css-nextjs-ts/tsconfig.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "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/examples/pigment-css-vite-ts/.gitignore b/examples/pigment-css-vite-ts/.gitignore
deleted file mode 100644
index a547bf36d8d11a..00000000000000
--- a/examples/pigment-css-vite-ts/.gitignore
+++ /dev/null
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/examples/pigment-css-vite-ts/README.md b/examples/pigment-css-vite-ts/README.md
deleted file mode 100644
index 662397d8bc6778..00000000000000
--- a/examples/pigment-css-vite-ts/README.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Pigment CSS - Vite with TypeScript example project
-
-## How to use
-
-Download the example [or clone the repo](https://github.com/mui/material-ui):
-
-
-
-```bash
-curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/pigment-css-vite-ts
-cd pigment-css-vite-ts
-```
-
-Install it and run:
-
-```bash
-npm install
-npm run dev
-```
-
-or:
-
-
-
-[](https://stackblitz.com/github/mui/material-ui/tree/master/examples/pigment-css-vite-ts)
-
-[](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/pigment-css-vite-ts)
-
-## Learn more
-
-To learn more about this example:
-
-- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-css-react/README.md) - learn more about Pigment CSS features and APIs.
-- [Vite documentation](https://vitejs.dev/guide/) - learn about Vite features and APIs.
diff --git a/examples/pigment-css-vite-ts/index.html b/examples/pigment-css-vite-ts/index.html
deleted file mode 100644
index 04c0ee3a1dd977..00000000000000
--- a/examples/pigment-css-vite-ts/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
-
-
- Pigment CSS + Vite + TypeScript
-
-
-
-
-
-
diff --git a/examples/pigment-css-vite-ts/package.json b/examples/pigment-css-vite-ts/package.json
deleted file mode 100644
index 8b61ac52d46cb2..00000000000000
--- a/examples/pigment-css-vite-ts/package.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "name": "pigment-css-vite-ts",
- "private": true,
- "version": "5.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "dependencies": {
- "@pigment-css/react": "latest",
- "react": "latest",
- "react-dom": "latest"
- },
- "devDependencies": {
- "@pigment-css/vite-plugin": "latest",
- "@types/react": "latest",
- "@types/react-dom": "latest",
- "@vitejs/plugin-react": "latest",
- "typescript": "latest",
- "vite": "latest"
- }
-}
diff --git a/examples/pigment-css-vite-ts/public/vite.svg b/examples/pigment-css-vite-ts/public/vite.svg
deleted file mode 100644
index e7b8dfb1b2a60b..00000000000000
--- a/examples/pigment-css-vite-ts/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/pigment-css-vite-ts/src/App.tsx b/examples/pigment-css-vite-ts/src/App.tsx
deleted file mode 100644
index 011af95d7d5be0..00000000000000
--- a/examples/pigment-css-vite-ts/src/App.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import * as React from 'react';
-import { styled, css, keyframes } from '@pigment-css/react';
-
-const scale = keyframes({
- to: { scale: 'var(--s2)' },
-});
-
-const Link = styled('a', { shouldForwardProp: (prop) => prop !== 'outlined' })<{
- outlined?: boolean;
-}>(({ theme }) => ({
- fontSize: '1rem',
- background: 'rgba(0 0 0 / 0.04)',
- padding: '0.8rem 1rem',
- letterSpacing: '1px',
- borderRadius: '8px',
- textAlign: 'center',
- ...theme.applyStyles('dark', {
- background: 'rgba(255 255 255 / 0.1)',
- }),
- variants: [
- {
- props: { outlined: true },
- style: {
- background: 'transparent',
- color: `hsl(${theme.vars.palette.primary})`,
- border: `1px solid hsl(${theme.vars.palette.border})`,
- },
- },
- ],
-}));
-
-const Bubble = styled('span')({
- height: 'var(--size, 100%)',
- aspectRatio: '1',
- background: 'radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%)',
- position: 'absolute',
- display: 'inline-block',
- left: 'var(--x, 0)',
- top: 'var(--y, 0)',
- scale: '0',
- translate: '-50% -50%',
- mixBlendMode: 'multiply',
- filter: 'blur(2px)',
- animation: `${scale} var(--s, 2s) var(--d, 0s) infinite alternate`,
-});
-
-function randomBetween(min: number, max: number) {
- return Math.floor(Math.random() * (max - min + 1) + min);
-}
-
-function generateBubbleVars() {
- return `
- --x: ${randomBetween(10, 90)}%;
- --y: ${randomBetween(15, 85)}%;
- --h: ${randomBetween(0, 360)};
- --s2: ${randomBetween(2, 6)};
- --d: -${randomBetween(250, 400) / 1000}s;
- --s: ${randomBetween(3, 6)}s;
- `;
-}
-
-export default function Home() {
- return (
-
- ({
- fontFamily: 'system-ui, sans-serif',
- fontSize: '4rem',
- fontWeight: 500,
- textAlign: 'center',
- position: 'relative',
- display: 'flex',
- alignItems: 'center',
- color: '#888',
- marginBottom: '1rem',
- ...theme.applyStyles('dark', { color: '#fff' }),
- }))}`}
- >
- Pigment CSS
- ({
- position: 'absolute',
- inset: '0',
- background: 'white',
- mixBlendMode: 'color-burn',
- overflow: 'hidden',
- pointerEvents: 'none',
- ...theme.applyStyles('dark', {
- mixBlendMode: 'darken',
- filter: 'brightness(2)',
- }),
- }))}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
- CSS-in-JS library with static extraction
-
-
-
- Documentation
-
-
- Roadmap
-
-
-
- );
-}
diff --git a/examples/pigment-css-vite-ts/src/augment.d.ts b/examples/pigment-css-vite-ts/src/augment.d.ts
deleted file mode 100644
index d10b46e01d4da0..00000000000000
--- a/examples/pigment-css-vite-ts/src/augment.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-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-vite-ts/src/globals.css b/examples/pigment-css-vite-ts/src/globals.css
deleted file mode 100644
index a1e5313f646dca..00000000000000
--- a/examples/pigment-css-vite-ts/src/globals.css
+++ /dev/null
@@ -1,16 +0,0 @@
-* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
-}
-
-a {
- color: inherit;
- text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
- html {
- color-scheme: dark;
- }
-}
diff --git a/examples/pigment-css-vite-ts/src/main.tsx b/examples/pigment-css-vite-ts/src/main.tsx
deleted file mode 100644
index 71b2cfa8aa8868..00000000000000
--- a/examples/pigment-css-vite-ts/src/main.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
-import '@pigment-css/react/styles.css';
-import './globals.css';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-
-
- ,
-);
diff --git a/examples/pigment-css-vite-ts/src/vite-env.d.ts b/examples/pigment-css-vite-ts/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe2a0061d..00000000000000
--- a/examples/pigment-css-vite-ts/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-///
diff --git a/examples/pigment-css-vite-ts/tsconfig.json b/examples/pigment-css-vite-ts/tsconfig.json
deleted file mode 100644
index 3d0a51a86e2024..00000000000000
--- a/examples/pigment-css-vite-ts/tsconfig.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
- "compilerOptions": {
- "target": "ESNext",
- "useDefineForClassFields": true,
- "lib": ["DOM", "DOM.Iterable", "ESNext"],
- "allowJs": false,
- "skipLibCheck": true,
- "esModuleInterop": false,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "module": "ESNext",
- "moduleResolution": "Node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react-jsx"
- },
- "include": ["src"],
- "references": [{ "path": "./tsconfig.node.json" }]
-}
diff --git a/examples/pigment-css-vite-ts/tsconfig.node.json b/examples/pigment-css-vite-ts/tsconfig.node.json
deleted file mode 100644
index 9d31e2aed93c87..00000000000000
--- a/examples/pigment-css-vite-ts/tsconfig.node.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "compilerOptions": {
- "composite": true,
- "module": "ESNext",
- "moduleResolution": "Node",
- "allowSyntheticDefaultImports": true
- },
- "include": ["vite.config.ts"]
-}
diff --git a/examples/pigment-css-vite-ts/vite.config.ts b/examples/pigment-css-vite-ts/vite.config.ts
deleted file mode 100644
index 1a6ee2cd2f8942..00000000000000
--- a/examples/pigment-css-vite-ts/vite.config.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import { pigment, extendTheme } from '@pigment-css/vite-plugin';
-
-// To learn more about theming, visit https://github.com/mui/material-ui/blob/master/packages/zero-runtime/README.md#theming
-const theme = extendTheme({
- colorSchemes: {
- light: {
- palette: {
- background: '0 0% 100%',
- foreground: '240 10% 3.9%',
- primary: '240 5.9% 10%',
- border: '240 5.9% 90%',
- },
- },
- dark: {
- palette: {
- background: '240 10% 3.9%',
- foreground: '0 0% 80%',
- primary: '0 0% 98%',
- border: '240 3.7% 15.9%',
- },
- },
- },
-});
-
-// https://vitejs.dev/config/
-export default defineConfig({
- plugins: [
- pigment({
- theme,
- }),
- react(),
- ],
-});