diff --git a/examples/pigment-css-vite-ts/.gitignore b/examples/pigment-css-vite-ts/.gitignore new file mode 100644 index 00000000000000..a547bf36d8d11a --- /dev/null +++ b/examples/pigment-css-vite-ts/.gitignore @@ -0,0 +1,24 @@ +# 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 new file mode 100644 index 00000000000000..ee0b8e25c330a7 --- /dev/null +++ b/examples/pigment-css-vite-ts/README.md @@ -0,0 +1,34 @@ +# 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: + + + +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/pigment-css-vite-ts) + +[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](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-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 new file mode 100644 index 00000000000000..dac8779ebcdecb --- /dev/null +++ b/examples/pigment-css-vite-ts/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + Vite + Zero + TS + + +
+ + + diff --git a/examples/pigment-css-vite-ts/package.json b/examples/pigment-css-vite-ts/package.json new file mode 100644 index 00000000000000..8b61ac52d46cb2 --- /dev/null +++ b/examples/pigment-css-vite-ts/package.json @@ -0,0 +1,24 @@ +{ + "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 new file mode 100644 index 00000000000000..e7b8dfb1b2a60b --- /dev/null +++ b/examples/pigment-css-vite-ts/public/vite.svg @@ -0,0 +1 @@ + \ 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 new file mode 100644 index 00000000000000..b3946c6bb8e9cd --- /dev/null +++ b/examples/pigment-css-vite-ts/src/App.tsx @@ -0,0 +1,202 @@ +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.5rem 1rem', + letterSpacing: '1px', + borderRadius: '4px', + 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: 'Kalnia, sans-serif', + fontSize: 'clamp(3rem, 1.9503rem + 4.4789vw, 6.25rem)', + 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-JS library with static extraction +
+ +
*': { flex: 'auto' }, + })} + > + + Documentation + + + Roadmap + +
+
+ ); +} diff --git a/examples/pigment-css-vite-ts/src/augment.d.ts b/examples/pigment-css-vite-ts/src/augment.d.ts new file mode 100644 index 00000000000000..d10b46e01d4da0 --- /dev/null +++ b/examples/pigment-css-vite-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-vite-ts/src/globals.css b/examples/pigment-css-vite-ts/src/globals.css new file mode 100644 index 00000000000000..a1e5313f646dca --- /dev/null +++ b/examples/pigment-css-vite-ts/src/globals.css @@ -0,0 +1,16 @@ +* { + 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 new file mode 100644 index 00000000000000..71b2cfa8aa8868 --- /dev/null +++ b/examples/pigment-css-vite-ts/src/main.tsx @@ -0,0 +1,11 @@ +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 new file mode 100644 index 00000000000000..11f02fe2a0061d --- /dev/null +++ b/examples/pigment-css-vite-ts/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/pigment-css-vite-ts/tsconfig.json b/examples/pigment-css-vite-ts/tsconfig.json new file mode 100644 index 00000000000000..3d0a51a86e2024 --- /dev/null +++ b/examples/pigment-css-vite-ts/tsconfig.json @@ -0,0 +1,21 @@ +{ + "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 new file mode 100644 index 00000000000000..9d31e2aed93c87 --- /dev/null +++ b/examples/pigment-css-vite-ts/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "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 new file mode 100644 index 00000000000000..1a6ee2cd2f8942 --- /dev/null +++ b/examples/pigment-css-vite-ts/vite.config.ts @@ -0,0 +1,35 @@ +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(), + ], +}); diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index 358a92fc19ba1f..ce49ec5b4ffd86 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -85,6 +85,17 @@ Finally, import the stylesheet in the root `layout.tsx` file: ### Vite +#### Starter template + +Use the following commands to create a new Vite 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-vite-ts +cd pigment-css-vite-ts +``` + +#### Manual installation + ```bash npm install @pigment-css/react npm install --save-dev @pigment-css/vite-plugin