Merge pull request #2568 from dxc-technology/PelayoFelgueroso/new-branding-table

[major] Implement new branding changes on Table and DataGrid

Author: Jialecl

packages/lib/src/data-grid/DataGrid.tsx

@@ -64,10 +64,11 @@ const DataGridContainer = styled.div<{
     border-top-left-radius: var(--border-radius-s);
     border-top-right-radius: var(--border-radius-s);
     .rdg-cell {
-      font-weight: var(--font-weight-bold);
-      color: var(--color-fg-neutral-bright);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-fg-neutral-dark);
       padding: 0px var(--spacing-padding-xs);
-      background-color: var(--color-bg-primary-strong);
+      background-color: var(--color-bg-neutral-lighter);
+      border-bottom: var(--border-width-s) var(--border-style-default) var(--border-color-primary-stronger);
       .sortIconContainer {
         margin-left: var(--spacing-gap-s);
         display: flex;

packages/lib/src/table/Table.tsx

@@ -27,7 +27,7 @@ const Table = styled.table<{ mode: TablePropsType["mode"] }>`
   width: 100%;
 
   & tr {
-    border-bottom: var(--border-width-s) solid var(--border-color-neutral-lighter);
+    border-bottom: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-lighter);
     height: ${({ mode }) => (mode === "default" ? "var(--height-xxl)" : "var(--height-l)")};
   }
   & td {
@@ -42,12 +42,13 @@ const Table = styled.table<{ mode: TablePropsType["mode"] }>`
     text-align: start;
   }
   & th {
-    background-color: var(--color-fg-primary-strong);
-    color: var(--color-fg-neutral-bright);
+    background-color: var(--color-bg-neutral-lighter);
+    border-bottom: var(--border-width-s) var(--border-style-default) var(--border-color-primary-stronger);
+    color: var(--color-fg-neutral-dark);
     font-family: var(--typography-font-family);
     font-size: var(--typography-label-m);
     font-style: normal;
-    font-weight: var(--typography-label-regular);
+    font-weight: var(--typography-label-semibold);
     line-height: normal;
     padding: var(--spacing-padding-s) var(--spacing-padding-m);
     text-align: start;