🎨(react) enhance FormExemples stories

update FormExemples stories with new css variables introduce
with the new tokens architectures

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">
+          <div className="fs-l clr-gray-800 mb-t">Your curriculum vitae</div>
-            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 ?

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>

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 ?

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 ?