From 732c6b113cef403e85d6ec24cd5b247444e1c998 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 13 Mar 2024 17:21:48 +0700
Subject: [PATCH 1/2] update readme as suggested

---
 packages/pigment-css-react/README.md | 52 ++++++++++++++++++++++++++--
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md
index 6d7e0ccbfd39e3..2172bd0bb13cb1 100644
--- a/packages/pigment-css-react/README.md
+++ b/packages/pigment-css-react/README.md
@@ -299,7 +299,23 @@ const Button = styled('button')({
 
 > 💡 This approach is recommended when the value of a prop is **unknown** ahead of time or possibly unlimited values, for example styling based on the user's input.
 
-Use a callback function as a value to create a dynamic style for the specific CSS property:
+There are two ways to acheive this (both involve using a CSS variable):
+
+1. Declare a CSS variable directly in the styles and set its value using inline styles:
+
+```jsx
+const Heading = styled('h1')({
+  color: 'var(--color)',
+});
+
+function Heading() {
+  const [color, setColor] = React.useState('red');
+
+  return <Heading style={{ '--color': color }} />;
+}
+```
+
+2. Use a callback function as a value to create a dynamic style for the specific CSS property:
 
 ```jsx
 const Heading = styled('h1')({
@@ -347,12 +363,44 @@ This enables you to override the default `color` of the Heading component render
 
 You can also export any styled component you create and use it as the base for additional components:
 
-```tsx
+```jsx
 const ExtraHeading = styled(Heading)({
   // ... overridden styled
 });
 ```
 
+#### Media and Container queries
+
+All Pigment CSS APIs has built-in support for writing media queries and container queries. You can use the `@media` and `@container` keys to define the styles for different screen sizes and container sizes.
+
+```jsx
+import { css, styled } from '@pigment-css/react';
+
+const styles = css({
+  fontSize: '2rem',
+  '@media (min-width: 768px)': {
+    fontSize: '3rem',
+  },
+  '@container (max-width: 768px)': {
+    fontSize: '1.5rem',
+  },
+});
+
+const Heading = styled('h1')({
+  fontSize: '2rem',
+  '@media (min-width: 768px)': {
+    fontSize: '3rem',
+  },
+  '@container (max-width: 768px)': {
+    fontSize: '1.5rem',
+  },
+});
+```
+
+> 💡 **Good to know**:
+>
+> Pigment CSS uses emotion's serialize package behind the scene for turning tagged template and object to CSS string.
+
 #### Typing props
 
 If you use TypeScript, add the props typing before the styles to get the type checking:

From a7d51d3c1b0c6d6f16af1a0be1efdf2e3a51f029 Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Fri, 15 Mar 2024 09:38:22 +0700
Subject: [PATCH 2/2] Apply suggestions from code review

Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
---
 packages/pigment-css-react/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/pigment-css-react/README.md b/packages/pigment-css-react/README.md
index 2172bd0bb13cb1..893b3c0a658bd8 100644
--- a/packages/pigment-css-react/README.md
+++ b/packages/pigment-css-react/README.md
@@ -371,7 +371,7 @@ const ExtraHeading = styled(Heading)({
 
 #### Media and Container queries
 
-All Pigment CSS APIs has built-in support for writing media queries and container queries. You can use the `@media` and `@container` keys to define the styles for different screen sizes and container sizes.
+Pigment CSS APIs have built-in support for writing media queries and container queries. Use the `@media` and `@container` keys to define styles for different screen and container sizes.
 
 ```jsx
 import { css, styled } from '@pigment-css/react';
@@ -399,7 +399,7 @@ const Heading = styled('h1')({
 
 > 💡 **Good to know**:
 >
-> Pigment CSS uses emotion's serialize package behind the scene for turning tagged template and object to CSS string.
+> Pigment CSS uses Emotion behind the scenes for turning tagged templates and objects into CSS strings.
 
 #### Typing props