[pigment-css] Tweak the examples and edit READMEs (mui#41408)

andriy-shymkiv · Mar 8, 2024 · f4a99af · f4a99af
1 parent 1e80616
commit f4a99af
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 45 deletions.
diff --git 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
@@ -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() {
     >
       <h1
         className={`
-        ${kalnia.className}
         ${css(({ theme }) => ({
-          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() {
       </h1>
       <div
         className={`
-          ${josefin.className}
           ${css({
+            fontFamily: 'system-ui, sans-serif',
             letterSpacing: '2px',
-            fontSize: 'clamp(0.75rem, 0.5885rem + 0.6891vw, 1.25rem)',
-            textTransform: 'uppercase',
             fontWeight: 500,
             opacity: 0.5,
             lineHeight: 2,

diff --git a/examples/pigment-css-vite-ts/index.html b/examples/pigment-css-vite-ts/index.html
@@ -4,14 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="initial-scale=1, width=device-width" />
-    <!-- Fonts to support Material Design -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Kalnia:[email protected]&display=swap"
-      rel="stylesheet"
-    />
-    <title>Vite + Zero + TS</title>
+    <title>Pigment CSS + Vite + TypeScript</title>
   </head>
   <body>
     <div id="root"></div>

diff --git 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() {
       <h1
         className={`
         ${css(({ theme }) => ({
-          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() {
       </h1>
       <div
         className={css({
-          fontFamily: 'Josefin Sans, sans-serif',
+          fontFamily: 'system-ui, sans-serif',
           letterSpacing: '2px',
-          fontSize: 'clamp(0.75rem, 0.5885rem + 0.6891vw, 1.25rem)',
-          textTransform: 'uppercase',
-          fontWeight: 500,
-          opacity: 0.5,
+          opacity: 0.6,
           lineHeight: 2,
           textAlign: 'center',
           textWrap: 'balance',
         })}
       >
-        CSS-JS library with static extraction
+        CSS-in-JS library with static extraction
       </div>
-
       <div
         className={css({
           display: 'flex',
           flexWrap: 'wrap',
           gap: '1rem',
-          marginTop: '3rem',
-          '& > *': { flex: 'auto' },
+          marginTop: '2rem',
         })}
       >
         <Link
-          href="https://github.com/mui/material-ui/blob/master/packages/zero-runtime/README.md"
+          href="https://github.com/mui/material-ui/blob/master/packages/pigment-react/README.md"
           target="_blank"
           rel="noopener noreferrer"
         >

diff --git 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(...);