Use color vars

Author: Lindsey Zylstra

components/Block/Carousel/Carousel.vue

@@ -114,7 +114,6 @@ onMounted(async () => {
 	}
 
 	&__button {
-		color: #333;
 		padding: var(--space-2);
 		&__svg {
 			width: 24px;

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);

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);
 

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;