[DataTable] Fix table row border bottom (#4975)

* [DataTable] Fix table row border bottom

The color was darker and inconsistent with the way other table headers are displayed.

* Update UNRELEASED.md

Author: laurkim

UNRELEASED.md

@@ -18,6 +18,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Fixed `segmented` `ButtonGroup` misaligning icon only buttons when grouped with text only buttons ([#4079](https://github.com/Shopify/polaris-react/issues/4079))
 - Added missing styles for `destructive` `Page` `secondaryActions` ([#4647](https://github.com/Shopify/polaris-react/pull/4647))
 - Removed `min-height` from `Page` `additionalNavigation` ([#4952](https://github.com/Shopify/polaris-react/pull/4952))
+- Fixed overly dark `bottom-border` on `DataTable` header cell and total cell. ([#4975])(https://github.com/Shopify/polaris-react/pull/4975)
 
 ### Documentation
 

src/components/DataTable/DataTable.scss

@@ -92,7 +92,7 @@ $breakpoint: 768px;
 
 .Cell-header {
   @include text-emphasis-normal;
-  border-bottom: border(dark);
+  border-bottom: border('divider');
   border-top: 0;
 }
 
@@ -165,7 +165,7 @@ $breakpoint: 768px;
 .Cell-total {
   @include text-emphasis-strong;
   background: var(--p-surface-subdued);
-  border-bottom: border();
+  border-bottom: border('divider');
 }
 
 .Cell-total-footer {