diff --git a/examples/pigment-css-nextjs-ts/README.md b/examples/pigment-css-nextjs-ts/README.md index 3449ebdbd149ec..f4ef7dd52a8ece 100644 --- a/examples/pigment-css-nextjs-ts/README.md +++ b/examples/pigment-css-nextjs-ts/README.md @@ -1,6 +1,6 @@ # 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 MUI's zero-runtime CSS-in-JS installed. +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 diff --git a/examples/pigment-css-nextjs-ts/src/app/page.tsx b/examples/pigment-css-nextjs-ts/src/app/page.tsx index 08a5fc7e6cb3fe..109b5cbdad5f10 100644 --- a/examples/pigment-css-nextjs-ts/src/app/page.tsx +++ b/examples/pigment-css-nextjs-ts/src/app/page.tsx @@ -1,10 +1,6 @@ import * as React from 'react'; -import { Kalnia, Josefin_Sans } from 'next/font/google'; import { styled, css, keyframes } from '@pigment-css/react'; -const kalnia = Kalnia({ subsets: ['latin'] }); -const josefin = Josefin_Sans({ subsets: ['latin'] }); - const scale = keyframes({ to: { scale: 'var(--s2)' }, }); @@ -14,9 +10,9 @@ const Link = styled('a', { shouldForwardProp: (prop) => prop !== 'outlined' })<{ }>(({ theme }) => ({ fontSize: '1rem', background: 'rgba(0 0 0 / 0.04)', - padding: '0.5rem 1rem', + padding: '0.8rem 1rem', letterSpacing: '1px', - borderRadius: '4px', + borderRadius: '8px', textAlign: 'center', ...theme.applyStyles('dark', { background: 'rgba(255 255 255 / 0.1)', @@ -76,9 +72,9 @@ export default function Home() { >

({ - fontSize: 'clamp(3rem, 1.9503rem + 4.4789vw, 6.25rem)', + fontFamily: 'system-ui, sans-serif', + fontSize: '4rem', fontWeight: 500, textAlign: 'center', position: 'relative', @@ -158,11 +154,9 @@ export default function Home() {

- - - - - Vite + Zero + TS + Pigment CSS + Vite + TypeScript
diff --git a/examples/pigment-css-vite-ts/src/App.tsx b/examples/pigment-css-vite-ts/src/App.tsx index b3946c6bb8e9cd..cbc7ed15dc3740 100644 --- a/examples/pigment-css-vite-ts/src/App.tsx +++ b/examples/pigment-css-vite-ts/src/App.tsx @@ -10,9 +10,9 @@ const Link = styled('a', { shouldForwardProp: (prop) => prop !== 'outlined' })<{ }>(({ theme }) => ({ fontSize: '1rem', background: 'rgba(0 0 0 / 0.04)', - padding: '0.5rem 1rem', + padding: '0.8rem 1rem', letterSpacing: '1px', - borderRadius: '4px', + borderRadius: '8px', textAlign: 'center', ...theme.applyStyles('dark', { background: 'rgba(255 255 255 / 0.1)', @@ -47,6 +47,7 @@ const Bubble = styled('span')({ function randomBetween(min: number, max: number) { return Math.floor(Math.random() * (max - min + 1) + min); } + function generateBubbleVars() { return ` --x: ${randomBetween(10, 90)}%; @@ -77,8 +78,8 @@ export default function Home() {

({ - fontFamily: 'Kalnia, sans-serif', - fontSize: 'clamp(3rem, 1.9503rem + 4.4789vw, 6.25rem)', + fontFamily: 'system-ui, sans-serif', + fontSize: '4rem', fontWeight: 500, textAlign: 'center', position: 'relative', @@ -158,31 +159,26 @@ export default function Home() {

- CSS-JS library with static extraction + CSS-in-JS library with static extraction
-
*': { flex: 'auto' }, + marginTop: '2rem', })} > diff --git a/packages/pigment-react/README.md b/packages/pigment-react/README.md index ce49ec5b4ffd86..baf514ec870234 100644 --- a/packages/pigment-react/README.md +++ b/packages/pigment-react/README.md @@ -4,8 +4,8 @@ Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styl - [Getting started](#getting-started) - [Why this project exists?](#why-choose-pigment-css) - - [Next.js](#nextjs) - - [Vite](#vite) + - [Next.js](#nextjs-starter-template) + - [Vite](#vite-starter-template) - [Basic usage](#basic-usage) - [Creating styles](#creating-styles) - [Creating components](#creating-components) @@ -35,9 +35,7 @@ Pigment CSS addresses the needs of the modern React developer by providing a zer Compared to its predecessors, Pigment CSS offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components. Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling us to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment in v6. -### Next.js - -#### Starter template +### Next.js - Starter template Use the following commands to create a new Next.js project with Pigment CSS set up: @@ -83,9 +81,7 @@ Finally, import the stylesheet in the root `layout.tsx` file: } ``` -### Vite - -#### Starter template +### Vite - Starter template Use the following commands to create a new Vite project with Pigment CSS set up: @@ -134,7 +130,7 @@ Finally, import the stylesheet in the root `main.tsx` file: ## Basic usage -> You must configure Pigment CSS with [Next.js](#nextjs) or [Vite](#vite) first. +**You must configure Pigment CSS with [Next.js](#nextjs) or [Vite](#vite) first.** ### Creating styles @@ -371,7 +367,7 @@ const Heading = styled('h1')<{ isError?: boolean }>({ 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'; +import { keyframes } from '@pigment-css/react'; const fadeIn = keyframes` from { @@ -390,7 +386,7 @@ function Example1() { 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'; +import { css, styled, keyframes } from '@pigment-css/react'; const fadeIn = keyframes(...);