diff --git a/src/components/DataTable/DataTable.scss b/src/components/DataTable/DataTable.scss
index fcf41bd23c6..f42502b30e9 100644
--- a/src/components/DataTable/DataTable.scss
+++ b/src/components/DataTable/DataTable.scss
@@ -29,8 +29,8 @@ $breakpoint: 768px;
 .Pip {
   height: rem(6px);
   width: rem(6px);
-  background: color('ink', 'lightest');
-  border-radius: border-radius();
+  background: var(--p-text-subdued, color('ink', 'lightest'));
+  border-radius: var(--p-border-radius-base, border-radius());
 
   &:not(:last-of-type) {
     margin-right: spacing(extra-tight);
@@ -38,7 +38,7 @@ $breakpoint: 768px;
 }
 
 .Pip-visible {
-  background: color('ink');
+  background: var(--p-text, color('ink'));
 }
 
 .ScrollContainer {
@@ -61,7 +61,8 @@ $breakpoint: 768px;
 
 .Cell {
   padding: spacing();
-  border-bottom: border-width() solid color('sky', 'light');
+  border-bottom: border-width() solid
+    var(--p-border-subdued, color('sky', 'light'));
   white-space: nowrap;
   text-align: left;
   transition: background-color 0.2s ease-in-out;
@@ -123,14 +124,16 @@ $breakpoint: 768px;
   display: inline-flex;
   justify-content: flex-end;
   align-items: baseline;
+  @include recolor-icon(var(--p-icon));
+  color: var(--p-text, color(ink));
   transition: color duration() easing();
   padding: spacing();
   cursor: pointer;
 
   &:hover,
   &:focus {
-    @include recolor-icon(color('indigo'));
-    color: color('indigo');
+    @include recolor-icon(var(--p-interactive-hovered, color('indigo')));
+    color: var(--p-interactive-hovered, color('indigo'));
 
     .Icon {
       opacity: 1;