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

update datagrid token and css files with new css variables introduce
with the new tokens architectures
---
 .../react/src/components/DataGrid/_index.scss | 61 ++++++++++---------
 .../src/components/DataGrid/index.stories.tsx |  7 ++-
 .../react/src/components/DataGrid/index.tsx   | 18 +++---
 3 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/packages/react/src/components/DataGrid/_index.scss b/packages/react/src/components/DataGrid/_index.scss
index af706ba..1ed729f 100644
--- a/packages/react/src/components/DataGrid/_index.scss
+++ b/packages/react/src/components/DataGrid/_index.scss
@@ -2,14 +2,14 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: var(--c--theme--spacings--s);
+  gap: var(--c--globals--spacings--s);
   position: relative;
   container-type: inline-size;
 
   &--empty {
     min-height: 400px;
-    background-color: var(--c--theme--colors--greyscale-000);
-    border: 1px var(--c--theme--colors--greyscale-300) solid;
+    background-color: var(--c--contextuals--background--surface--secondary);
+    border: 1px var(--c--contextuals--border--semantic--neutral--tertiary) solid;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -21,31 +21,33 @@
 
     > table {
       border-collapse: collapse;
-      font-weight: var(--c--theme--font--weights--regular);
+      font-weight: var(--c--globals--font--weights--regular);
       width: 100%;
       table-layout: fixed;
 
-      th, td {
+      th,
+      td {
         text-align: left;
-        padding: 0 var(--c--theme--spacings--s);
+        padding: 0 var(--c--globals--spacings--s);
         white-space: nowrap;
-        font-size: var(--c--theme--font--sizes--m);
+        font-size: var(--c--globals--font--sizes--s);
         height: 3rem;
         overflow: hidden;
       }
 
       th {
-        color: var(--c--theme--colors--greyscale-800);
-        font-weight: var(--c--theme--font--weights--bold);
-        font-size: var(--c--theme--font--sizes--h5);
+        color: var(--c--contextuals--content--semantic--neutral--primary);
+        font-weight: var(--c--globals--font--weights--bold);
+        font-size: var(--c--globals--font--sizes--h5);
         text-transform: uppercase;
 
         .c__datagrid__header {
           display: flex;
           align-items: center;
+          font-size: var(--c--globals--font--sizes--xs) !important;
 
           .material-icons {
-            color: var(--c--theme--colors--greyscale-500);
+            color: var(--c--contextuals--content--semantic--neutral--tertiary);
           }
 
           &--sortable {
@@ -60,18 +62,18 @@
       }
 
       td {
-        color: var(--c--theme--colors--greyscale-700);
+        color: var(--c--contextuals--content--semantic--neutral--primary);
       }
 
-      tbody tr {
-        border: 1px var(--c--theme--colors--greyscale-300) solid;
+      tbody tr, thead tr {
+        border: 1px var(--c--contextuals--border--surface--primary) solid;
       }
 
       .c__datagrid__row {
         &__cell {
           &--highlight {
-            color: var(--c--theme--colors--greyscale-800);
-            font-weight: var(--c--theme--font--weights--medium);
+            color: var(--c--contextuals--content--semantic--neutral--primary);
+            font-weight: var(--c--globals--font--weights--medium);
           }
           &--actions {
             display: flex;
@@ -81,8 +83,8 @@
         }
       }
 
-      tbody {
-        background-color: var(--c--theme--colors--greyscale-000);
+      tbody, thead {
+        background-color: var(--c--contextuals--background--surface--secondary);
       }
     }
   }
@@ -98,14 +100,20 @@
     &__background {
       position: absolute;
       inset: 0;
-      background-color: var(--c--theme--colors--greyscale-100);
+      background-color: var(--c--contextuals--background--semantic--neutral--tertiary);
       opacity: 0.5;
-      animation: pulse 1s infinite var(--c--theme--transitions--ease-out);
+      animation: pulse 1s infinite var(--c--globals--transitions--ease-out);
 
       @keyframes pulse {
-        0% { opacity: 0.5; }
-        50% { opacity: 0.7;  }
-        100% { opacity: 0.5; }
+        0% {
+          opacity: 0.5;
+        }
+        50% {
+          opacity: 0.7;
+        }
+        100% {
+          opacity: 0.5;
+        }
       }
     }
   }
@@ -114,17 +122,14 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--c--theme--spacings--s);
+    gap: var(--c--globals--spacings--s);
 
     img {
       max-width: 400px;
       width: 80%;
       padding: 0.625rem;
       border-radius: 0.625rem;
-      border: 1px var(--c--theme--colors--greyscale-300) solid;
+      border: 1px var(--c--contextuals--border--semantic--neutral--tertiary) solid;
     }
   }
-
-
-
 }
diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx
index bfe81da..26db097 100644
--- a/packages/react/src/components/DataGrid/index.stories.tsx
+++ b/packages/react/src/components/DataGrid/index.stories.tsx
@@ -114,7 +114,7 @@ export const ClientSideWithoutPagination = () => {
           id: "actions",
           renderCell: () => (
             <Button
-              color="tertiary-text"
+              color="tertiary"
               size="small"
               icon={<span className="material-icons">delete</span>}
             />
@@ -254,7 +254,8 @@ export const FullServerSide = () => {
           id: "actions",
           renderCell: () => (
             <Button
-              color="tertiary-text"
+              variant="neutral"
+              color="tertiary"
               size="small"
               icon={<span className="material-icons">delete</span>}
             />
@@ -327,7 +328,7 @@ export const WithColumnWidth = () => {
           size: 50,
           renderCell: () => (
             <Button
-              color="tertiary-text"
+              color="tertiary"
               size="small"
               icon={<span className="material-icons">delete</span>}
             />
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index 01a17ad..78c62dd 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -102,7 +102,7 @@ export const DataGrid = <T extends Row>({
   headlessColumns.forEach((column) => {
     if (column.enableSorting && !onSortModelChange) {
       console.warn(
-        "You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected.",
+        "You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected."
       );
     }
   });
@@ -112,11 +112,11 @@ export const DataGrid = <T extends Row>({
    */
   const paginationState = useMemo(
     () => paginationToPaginationState(pagination),
-    [pagination],
+    [pagination]
   );
   const headlessSorting = useMemo(
     () => sortModelToSortingState(sortModel),
-    [sortModel],
+    [sortModel]
   );
 
   /**
@@ -139,7 +139,7 @@ export const DataGrid = <T extends Row>({
       // a TS error.
       if (typeof newHeadlessSorting === "function") {
         onSortModelChange?.(
-          sortingStateToSortModel(newHeadlessSorting(headlessSorting)),
+          sortingStateToSortModel(newHeadlessSorting(headlessSorting))
         );
       }
     },
@@ -171,7 +171,7 @@ export const DataGrid = <T extends Row>({
   const getContent = () => {
     if (showEmptyPlaceholder) {
       return (
-        <div className="c__datagrid__empty-placeholder fs-h3 clr-greyscale-900 fw-bold">
+        <div className="c__datagrid__empty-placeholder fs-h3 fw-bold">
           {!hideEmptyPlaceholderImage && (
             <img src={emptyImageUrl} alt={t("components.datagrid.empty_alt")} />
           )}
@@ -221,7 +221,7 @@ export const DataGrid = <T extends Row>({
                                     {
                                       "c__datagrid__header--sortable":
                                         header.column.getCanSort(),
-                                    },
+                                    }
                                   )}
                                   {...(header.column.getCanSort()
                                     ? {
@@ -240,13 +240,13 @@ export const DataGrid = <T extends Row>({
                                       indeterminate={table.getIsSomeRowsSelected()}
                                       onChange={table.getToggleAllRowsSelectedHandler()}
                                       aria-label={t(
-                                        "components.datagrid.rows_selection_aria",
+                                        "components.datagrid.rows_selection_aria"
                                       )}
                                     />
                                   ) : (
                                     flexRender(
                                       header.column.columnDef.header,
-                                      header.getContext(),
+                                      header.getContext()
                                     )
                                   )}
                                   {header.column.getIsSorted() === "asc" && (
@@ -303,7 +303,7 @@ export const DataGrid = <T extends Row>({
                           >
                             {flexRender(
                               cell.column.columnDef.cell,
-                              cell.getContext(),
+                              cell.getContext()
                             )}
                           </td>
                         );