feat: Update GuideTile to use abstract css color vars

newrelic · Jun 23, 2020 · d2091e4 · d2091e4
1 parent 80008d6
commit d2091e4
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/src/components/GuideTile.module.scss b/src/components/GuideTile.module.scss
@@ -1,10 +1,13 @@
 .tile {
   display: grid;
   grid-template-rows: auto auto 1fr auto;
-  background-color: white;
+  background: var(
+    --surface-background-color,
+    var(--primary-surface-background-color)
+  );
   box-shadow: var(--boxshadow);
   padding: 1rem;
-  border: 1px solid var(--color-neutrals-300);
+  border: 1px solid var(--border-color);
   border-radius: 0.25rem;
   position: relative;
   margin-top: 1rem;
@@ -28,7 +31,7 @@
   display: flex;
   align-items: center;
   text-align: right;
-  color: var(--color-neutrals-500);
+  color: var(--accent-text-color);
   padding: 0.3rem 0 0.2rem 1.2rem;
   justify-self: end;
 }
@@ -40,8 +43,8 @@
   margin-left: -2.75rem;
   width: 5.5rem;
   height: 5.5rem;
-  border: 4px solid var(--color-white);
-  background-color: var(--color-neutrals-200);
+  border: 4px solid var(--surface-background-color);
+  background-color: var(--tertiary-background-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -51,7 +54,7 @@
 .description {
   font-size: 0.9rem;
   margin-bottom: 1.5rem;
-  color: var(--color-neutrals-600);
+  color: var(--secondary-text-color);
   flex: 1;
   padding: 0 0.5rem;
 }