update surface colors for data table (#2347)

Co-authored-by: Dan Rosenthal <[email protected]>
Shopify · Oct 28, 2019 · 2541f9c · 2541f9c
1 parent bb0eaf0
commit 2541f9c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/src/components/DataTable/DataTable.scss b/src/components/DataTable/DataTable.scss
@@ -54,7 +54,7 @@ $breakpoint: 768px;
 .TableRow {
   &:hover .Cell {
     @include breakpoint-after($breakpoint) {
-      background: color('sky', 'lighter');
+      background: var(--p-surface-hovered, color('sky', 'lighter'));
     }
   }
 }
@@ -151,7 +151,7 @@ $breakpoint: 768px;
 
 .Cell-total {
   @include text-emphasis-strong;
-  background: color('sky', 'lighter');
+  background: var(--p-surface-foreground-subdued, color('sky', 'lighter'));
   border-bottom: border();
 }
 
@@ -162,7 +162,7 @@ $breakpoint: 768px;
 
 .Footer {
   padding: spacing();
-  background: color('sky', 'light');
-  color: color('ink', 'lighter');
+  background: var(--p-surface-foreground-subdued, color('sky', 'light'));
+  color: var(--p-text-subdued-on-surface, color('ink', 'lighter'));
   text-align: center;
 }
diff --git a/src/utilities/theme/tests/utils.test.ts b/src/utilities/theme/tests/utils.test.ts
@@ -79,7 +79,7 @@ describe('buildCustomProperties', () => {
         '--p-surface': 'hsl(0, 0%, 100%, 1)',
         '--p-surface-background': 'hsl(0, 0%, 98%, 1)',
         '--p-surface-foreground': 'hsl(0, 0%, 100%, 1)',
-        '--p-surface-foreground-subdued': 'hsl(0, 0%, 90%, 1)',
+        '--p-surface-foreground-subdued': 'hsl(0, 0%, 95%, 1)',
         '--p-surface-inverse': 'hsl(0, 0%, 0%, 1)',
         '--p-surface-hovered': 'hsl(0, 0%, 93%, 1)',
         '--p-surface-pressed': 'hsl(0, 0%, 86%, 1)',
@@ -99,7 +99,7 @@ describe('buildColors', () => {
           '--p-surface': 'hsl(0, 0%, 98%, 1)',
           '--p-surface-background': 'hsl(0, 0%, 98%, 1)',
           '--p-surface-foreground': 'hsl(0, 0%, 100%, 1)',
-          '--p-surface-foreground-subdued': 'hsl(0, 0%, 90%, 1)',
+          '--p-surface-foreground-subdued': 'hsl(0, 0%, 95%, 1)',
           '--p-surface-inverse': 'hsl(0, 0%, 0%, 1)',
           '--p-surface-hovered': 'hsl(0, 0%, 93%, 1)',
           '--p-surface-pressed': 'hsl(0, 0%, 86%, 1)',
@@ -115,7 +115,7 @@ describe('buildColors', () => {
           '--p-surface': 'hsl(0, 0%, 100%, 1)',
           '--p-surface-background': 'hsl(0, 0%, 98%, 1)',
           '--p-surface-foreground': 'hsl(0, 0%, 100%, 1)',
-          '--p-surface-foreground-subdued': 'hsl(0, 0%, 90%, 1)',
+          '--p-surface-foreground-subdued': 'hsl(0, 0%, 95%, 1)',
           '--p-surface-inverse': 'hsl(0, 0%, 0%, 1)',
           '--p-surface-hovered': 'hsl(0, 0%, 93%, 1)',
           '--p-surface-pressed': 'hsl(0, 0%, 86%, 1)',

diff --git a/src/utilities/theme/utils.ts b/src/utilities/theme/utils.ts
@@ -93,7 +93,7 @@ function surfaceColors(color: HSLAColor, lightSurface: boolean) {
     surface: color,
     surfaceBackground: setLightness(color, lightSurface ? 98 : 7),
     surfaceForeground: setLightness(color, lightSurface ? 100 : 13),
-    surfaceForegroundSubdued: setLightness(color, lightSurface ? 90 : 10),
+    surfaceForegroundSubdued: setLightness(color, lightSurface ? 95 : 10),
     surfaceInverse: setLightness(color, lightSurface ? 0 : 100),
     surfaceHovered: setLightness(color, lightSurface ? 93 : 20),
     surfacePressed: setLightness(color, lightSurface ? 86 : 27),