From f4a99afc2c8769cf3591b31c5861770d075911f7 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 8 Mar 2024 08:54:53 -0300
Subject: [PATCH] [pigment-css] Tweak the examples and edit READMEs (#41408)

---
 examples/pigment-css-nextjs-ts/README.md      |  2 +-
 .../pigment-css-nextjs-ts/src/app/page.tsx    | 16 ++++---------
 examples/pigment-css-vite-ts/index.html       |  9 +------
 examples/pigment-css-vite-ts/src/App.tsx      | 24 ++++++++-----------
 packages/pigment-react/README.md              | 18 ++++++--------
 5 files changed, 24 insertions(+), 45 deletions(-)

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() {
     >
       <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
index dac8779ebcdecb..33cbc8ad392ca2 100644
--- 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:wght@100..700&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
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() {
       <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
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(...);