From 32d0b07f09844c3ed33a8a754d5767a66c3bec99 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Mon, 4 Sep 2023 20:35:43 +0500
Subject: [PATCH] web: use accentForeground color instead of white

---
 apps/web/src/components/route-container/index.tsx       | 2 +-
 apps/web/src/components/theme-preview/index.tsx         | 2 +-
 apps/web/src/views/auth.tsx                             | 2 +-
 packages/editor/src/extensions/code-block/component.tsx | 2 +-
 packages/theme/src/theme/variants/button.ts             | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/route-container/index.tsx b/apps/web/src/components/route-container/index.tsx
index 5b70f12cb..fd8a65439 100644
--- a/apps/web/src/components/route-container/index.tsx
+++ b/apps/web/src/components/route-container/index.tsx
@@ -102,7 +102,7 @@ function Header(props: RouteContainerProps) {
           {!isMobile && buttons?.create && (
             <Plus
               data-test-id={`${type}-action-button`}
-              color="white"
+              color="accentForeground"
               size={18}
               sx={{
                 bg: "accent",
diff --git a/apps/web/src/components/theme-preview/index.tsx b/apps/web/src/components/theme-preview/index.tsx
index ed5ee4bfe..4021f42e3 100644
--- a/apps/web/src/components/theme-preview/index.tsx
+++ b/apps/web/src/components/theme-preview/index.tsx
@@ -127,7 +127,7 @@ export function ThemePreview(props: ThemePreviewProps) {
               Notes
             </Text>
             <Plus
-              color="white"
+              color={theme.previewColors.list.accentForeground}
               size={8}
               sx={{
                 bg: theme.previewColors.list.accent,
diff --git a/apps/web/src/views/auth.tsx b/apps/web/src/views/auth.tsx
index d642ef89a..ee7bc351e 100644
--- a/apps/web/src/views/auth.tsx
+++ b/apps/web/src/views/auth.tsx
@@ -999,7 +999,7 @@ export function SubmitButton(props: SubmitButtonProps) {
       }}
       disabled={props.disabled}
     >
-      {props.loading ? <Loading color="white" /> : props.text}
+      {props.loading ? <Loading color="accentForeground" /> : props.text}
     </Button>
   );
 }
diff --git a/packages/editor/src/extensions/code-block/component.tsx b/packages/editor/src/extensions/code-block/component.tsx
index f02c2d9ad..00b2300e2 100644
--- a/packages/editor/src/extensions/code-block/component.tsx
+++ b/packages/editor/src/extensions/code-block/component.tsx
@@ -87,7 +87,7 @@ export function CodeblockComponent(
             position: "relative",
             lineHeight: "20px",
             // bg: "var(--background-secondary)",
-            color: "white",
+            // color: "white",
             overflowX: "hidden",
             display: "flex"
           }}
diff --git a/packages/theme/src/theme/variants/button.ts b/packages/theme/src/theme/variants/button.ts
index 43d937823..61e755135 100644
--- a/packages/theme/src/theme/variants/button.ts
+++ b/packages/theme/src/theme/variants/button.ts
@@ -73,7 +73,7 @@ const secondary: ThemeUIStyleObject = createButtonVariant(
   "paragraph"
 );
 
-const accent = createButtonVariant("accent", "white", {
+const accent = createButtonVariant("accent", "accentForeground", {
   hover: { bg: alpha("accent", 0.9) },
   active: { bg: alpha("accent", 0.8) }
 });
@@ -81,7 +81,7 @@ const accentSecondary = createButtonVariant("shade", "accent", {
   hover: { bg: alpha("shade", 0.3) }
 });
 
-const error = createButtonVariant("accent-error", "white", {
+const error = createButtonVariant("accent-error", "accentForeground-error", {
   hover: { bg: alpha("accent-error", 0.9) }
 });