feat(setting-row): describe setting-row component using design tokens…

…, update tests
Sage · Mar 1, 2022 · f4808f5 · f4808f5
1 parent 448bf03
commit f4808f5
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/src/components/settings-row/settings-row.spec.js b/src/components/settings-row/settings-row.spec.js
@@ -13,7 +13,6 @@ import {
   assertStyleMatch,
   testStyledSystemMargin,
 } from "../../__spec_helper__/test-utils";
-import baseTheme from "../../style/themes/base";
 
 describe("SettingsRow", () => {
   testStyledSystemMargin((props) => <SettingsRow {...props} />, { m: "0" });
@@ -50,7 +49,7 @@ describe("SettingsRow", () => {
 
         assertStyleMatch(
           {
-            borderBottom: `1px solid ${baseTheme.palette.slateTint(90)}`,
+            borderBottom: "1px solid var(--colorsUtilityMajor050)",
             paddingBottom: "30px",
           },
           wrapper.find(StyledSettingsRow)

diff --git a/src/components/settings-row/settings-row.style.js b/src/components/settings-row/settings-row.style.js
@@ -11,7 +11,7 @@ export const StyledSettingsRow = styled.div`
   ${margin}
 
   clear: both;
-  color: ${({ theme }) => theme.palette.slateTint(20)};
+  color: var(--colorsUtilityYin055);
   display: flex;
   font-size: 14px;
   justify-content: space-between;
@@ -21,7 +21,7 @@ export const StyledSettingsRow = styled.div`
   ${({ hasDivider }) =>
     hasDivider &&
     css`
-      border-bottom: 1px solid ${({ theme }) => theme.palette.slateTint(90)};
+      border-bottom: 1px solid var(--colorsUtilityMajor050);
       padding-bottom: 30px;
     `}
 
@@ -30,7 +30,7 @@ export const StyledSettingsRow = styled.div`
   }
 
   ${StyledHeadingTitle} {
-    color: ${({ theme }) => theme.palette.slate};
+    color: var(--colorsUtilityYin090);
     font-size: 15px;
     font-weight: bold;
     line-height: 18px;