From e63a7628e386e022767534c094281e1e323a312a Mon Sep 17 00:00:00 2001
From: Lindsey Zylstra <lindsey@directus.io>
Date: Tue, 19 Nov 2024 14:20:20 -0800
Subject: [PATCH] Use color vars

---
 components/Block/Carousel/Carousel.vue           | 1 -
 components/Block/MasonryGrid/MasonryGridCard.vue | 4 ++--
 components/Block/WallOfLove/Testimonial.vue      | 5 +++--
 components/Block/WallOfLove/WallOfLove.vue       | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/Block/Carousel/Carousel.vue b/components/Block/Carousel/Carousel.vue
index 32dcf0fb..3ed9472c 100644
--- a/components/Block/Carousel/Carousel.vue
+++ b/components/Block/Carousel/Carousel.vue
@@ -114,7 +114,6 @@ onMounted(async () => {
 	}
 
 	&__button {
-		color: #333;
 		padding: var(--space-2);
 		&__svg {
 			width: 24px;
diff --git a/components/Block/MasonryGrid/MasonryGridCard.vue b/components/Block/MasonryGrid/MasonryGridCard.vue
index f9cb01b6..5275a781 100644
--- a/components/Block/MasonryGrid/MasonryGridCard.vue
+++ b/components/Block/MasonryGrid/MasonryGridCard.vue
@@ -97,7 +97,7 @@ const isExternal = computed(() => !!cardData.value?.external_url);
 		top: 0;
 		left: 0;
 		padding: var(--space-7);
-		color: #455466;
+		color: var(--gray-600);
 		font-family: var(--family-display);
 		font-size: var(--font-size-2xl);
 		font-weight: 600;
@@ -122,7 +122,7 @@ const isExternal = computed(() => !!cardData.value?.external_url);
 		background: rgba(255, 255, 255, 0.8);
 		padding: var(--space-3) var(--space-4);
 		border-radius: var(--rounded-md);
-		color: #6b7b8c;
+		color: var(--gray-500);
 		font-size: var(--font-size-base);
 		font-family: var(--family-display);
 		line-height: var(--line-height-base);
diff --git a/components/Block/WallOfLove/Testimonial.vue b/components/Block/WallOfLove/Testimonial.vue
index c957c4b6..cd9795cc 100644
--- a/components/Block/WallOfLove/Testimonial.vue
+++ b/components/Block/WallOfLove/Testimonial.vue
@@ -53,12 +53,13 @@ const logoImageUrl = computed(() => {
 <style lang="scss" scoped>
 .testimonial-card {
 	border-radius: var(--rounded-xl);
-	border: 1px solid #d3dae4;
-	background: #fff;
+	border: 1px solid var(--gray-200);
+	background: var(--background);
 	display: flex;
 	min-width: 358px;
 	min-height: 330px;
 	padding: var(--space-8);
+	color: var(--foreground);
 	flex-direction: column;
 	gap: var(--space-8);
 
diff --git a/components/Block/WallOfLove/WallOfLove.vue b/components/Block/WallOfLove/WallOfLove.vue
index 21749292..81956acf 100644
--- a/components/Block/WallOfLove/WallOfLove.vue
+++ b/components/Block/WallOfLove/WallOfLove.vue
@@ -84,7 +84,7 @@ const toggleShowAll = () => {
 	align-items: center;
 
 	.wall-heading {
-		color: #455466;
+		color: var(--gray-500);
 		font-size: var(--font-size-2xl);
 		font-style: normal;
 		font-weight: 600;