From 43337d4f7f6e672c08b0f1ab8e2309047a137222 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Fri, 22 Aug 2025 10:15:29 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(react)=20enhance=20FormExemples=20?=
 =?UTF-8?q?stories?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

update FormExemples stories with new css variables introduce
with the new tokens architectures
---
 .../Examples/EdgeCases/index.stories.tsx      |  8 +++----
 .../Examples/ReactHookForm/Login.stories.tsx  |  6 ++---
 .../Examples/ReactHookForm/Sports.stories.tsx |  6 ++---
 .../Forms/Examples/index.stories.tsx          | 24 +++++++++----------
 4 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx b/packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx
index bf76103..b56a236 100644
--- a/packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx
@@ -24,7 +24,7 @@ export const OverflowLabels = () => {
         }}
       >
         <h1
-          className="fs-h3 fw-bold clr-greyscale-900"
+          className="fs-h3 fw-bold clr-gray-900"
           style={{ textAlign: "center" }}
         >
           Application
@@ -64,9 +64,7 @@ export const OverflowLabels = () => {
           <Input label={"City" + overflow} fullWidth={true} />
         </div>
         <div>
-          <div className="fs-l clr-greyscale-800 mb-t">
-            Your curriculum vitae
-          </div>
+          <div className="fs-l clr-gray-800 mb-t">Your curriculum vitae</div>
           <FileUploader
             fullWidth={true}
             text="pdf only ( 4mb maximum )"
@@ -81,7 +79,7 @@ export const OverflowLabels = () => {
         <Button fullWidth={true}>Apply</Button>
         <a
           href="/#"
-          className="clr-greyscale-800 fs-m"
+          className="clr-gray-800 fs-m"
           style={{ textAlign: "center" }}
         >
           Need help ?
diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
index 27e6d68..9e33790 100644
--- a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
@@ -52,7 +52,7 @@ export const Login = () => {
         onSubmit={methods.handleSubmit(onSubmit)}
       >
         <h1
-          className="fs-h3 fw-bold clr-greyscale-900"
+          className="fs-h3 fw-bold clr-gray-900"
           style={{ textAlign: "center" }}
         >
           Log in
@@ -84,9 +84,9 @@ export const Login = () => {
           />
         </div>
         <Button fullWidth={true}>Log in</Button>
-        <div className="fs-m clr-greyscale-800" style={{ textAlign: "center" }}>
+        <div className="fs-m clr-gray-800" style={{ textAlign: "center" }}>
           You do not have an account?{" "}
-          <a href="/#" className="clr-greyscale-800">
+          <a href="/#" className="clr-gray-800">
             Register
           </a>
         </div>
diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
index 9208e7b..8f8d19f 100644
--- a/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
@@ -65,14 +65,14 @@ const SportsBase = ({ values }: SportProps) => {
         onSubmit={methods.handleSubmit(onSubmit)}
       >
         <h1
-          className="fs-h3 fw-bold clr-greyscale-900"
+          className="fs-h3 fw-bold clr-gray-900"
           style={{ textAlign: "center" }}
         >
           Register
         </h1>
 
         <div>
-          <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
+          <div className="fs-l clr-gray-800 mb-t">Gender</div>
           <RadioGroup
             state={getFieldState("gender", methods.formState)}
             text={getFieldErrorMessage("gender", methods.formState)}
@@ -158,7 +158,7 @@ const SportsBase = ({ values }: SportProps) => {
         <Button fullWidth={true}>Apply</Button>
         <a
           href="/#"
-          className="clr-greyscale-800 fs-m"
+          className="clr-gray-800 fs-m"
           style={{ textAlign: "center" }}
         >
           Need help ?
diff --git a/packages/react/src/components/Forms/Examples/index.stories.tsx b/packages/react/src/components/Forms/Examples/index.stories.tsx
index 4c4e104..a8ba748 100644
--- a/packages/react/src/components/Forms/Examples/index.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/index.stories.tsx
@@ -25,7 +25,7 @@ export const Login = () => {
       }}
     >
       <h1
-        className="fs-h3 fw-bold clr-greyscale-900"
+        className="fs-h3 fw-bold clr-gray-900"
         style={{ textAlign: "center" }}
       >
         Log in
@@ -43,9 +43,9 @@ export const Login = () => {
         <Checkbox label="Remember me" />
       </div>
       <Button fullWidth={true}>Log in</Button>
-      <div className="fs-m clr-greyscale-800" style={{ textAlign: "center" }}>
+      <div className="fs-m clr-gray-800" style={{ textAlign: "center" }}>
         You do not have an account?{" "}
-        <a href="/#" className="clr-greyscale-800">
+        <a href="/#" className="clr-gray-800">
           Register
         </a>
       </div>
@@ -65,7 +65,7 @@ export const Application = () => {
       method="get"
     >
       <h1
-        className="fs-h3 fw-bold clr-greyscale-900"
+        className="fs-h3 fw-bold clr-gray-900"
         style={{ textAlign: "center" }}
       >
         Application
@@ -102,7 +102,7 @@ export const Application = () => {
         <Input label="City" fullWidth={true} />
       </div>
       <div>
-        <div className="fs-l clr-greyscale-800 mb-t">Your curriculum vitae</div>
+        <div className="fs-l clr-gray-800 mb-t">Your curriculum vitae</div>
         <FileUploader
           fullWidth={true}
           text="pdf only ( 4mb maximum )"
@@ -142,7 +142,7 @@ export const Application = () => {
       <Button fullWidth={true}>Apply</Button>
       <a
         href="/#"
-        className="clr-greyscale-800 fs-m"
+        className="clr-gray-800 fs-m"
         style={{ textAlign: "center" }}
       >
         Need help ?
@@ -163,13 +163,13 @@ export const Sports = () => {
       onSubmit={(e) => e.preventDefault()}
     >
       <h1
-        className="fs-h3 fw-bold clr-greyscale-900"
+        className="fs-h3 fw-bold clr-gray-900"
         style={{ textAlign: "center" }}
       >
         Register
       </h1>
       <div>
-        <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
+        <div className="fs-l clr-gray-800 mb-t">Gender</div>
         <div style={{ display: "flex", gap: "0.5rem" }}>
           <Radio name="gender" label="Male" fullWidth={true} />
           <Radio name="gender" label="Female" />
@@ -234,7 +234,7 @@ export const Sports = () => {
       <Button fullWidth={true}>Apply</Button>
       <a
         href="/#"
-        className="clr-greyscale-800 fs-m"
+        className="clr-gray-800 fs-m"
         style={{ textAlign: "center" }}
       >
         Need help ?
@@ -254,13 +254,13 @@ export const SportsDisabled = () => {
       }}
     >
       <h1
-        className="fs-h3 fw-bold clr-greyscale-900"
+        className="fs-h3 fw-bold clr-gray-900"
         style={{ textAlign: "center" }}
       >
         Register
       </h1>
       <div>
-        <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
+        <div className="fs-l clr-gray-800 mb-t">Gender</div>
         <div style={{ display: "flex", gap: "0.5rem" }}>
           <Radio name="gender" label="Male" fullWidth={true} disabled={true} />
           <Radio name="gender" label="Female" disabled={true} />
@@ -347,7 +347,7 @@ export const SportsDisabled = () => {
       </Button>
       <a
         href="/#"
-        className="clr-greyscale-800 fs-m"
+        className="clr-gray-800 fs-m"
         style={{ textAlign: "center" }}
       >
         Need help ?