diff --git a/packages/lib/src/data-grid/DataGrid.tsx b/packages/lib/src/data-grid/DataGrid.tsx index 617564c41..fb8e747f7 100644 --- a/packages/lib/src/data-grid/DataGrid.tsx +++ b/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; diff --git a/packages/lib/src/table/Table.tsx b/packages/lib/src/table/Table.tsx index 3b30a6c7a..9f5d8a392 100644 --- a/packages/lib/src/table/Table.tsx +++ b/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;