From a7aa78a349c2c72a1f3cad13bb5563839af612d8 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 19 Jul 2023 11:47:41 +0530
Subject: [PATCH] chore: high contrast theming (#1559)

* fix: archived issues empty state

* chore: update high contrast theme colors
---
 apps/app/components/core/issues-view.tsx |  2 +-
 apps/app/styles/globals.css              | 48 ++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 12c9cd0b8..4754a88e1 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -578,7 +578,7 @@ export const IssuesView: React.FC<Props> = ({
                 issueView === "gantt_chart" && <GanttChartView />
               )}
             </>
-          ) : router.query.view === "archived-issues" ? (
+          ) : router.pathname.includes("archived-issues") ? (
             <EmptyState
               title="Archived Issues will be shown here"
               description="All the issues that have been in the completed or canceled groups for the configured period of time can be viewed here."
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index 2a11a8d03..4e68cd503 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -106,10 +106,58 @@
 
   [data-theme="light-contrast"] {
     color-scheme: light !important;
+
+    --color-text-100: 11, 11, 11; /* primary text */
+    --color-text-200: 38, 38, 38; /* secondary text */
+    --color-text-300: 58, 58, 58; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+
+    --color-sidebar-text-100: 11, 11, 11; /* primary sidebar text */
+    --color-sidebar-text-200: 38, 38, 38; /* secondary sidebar text */
+    --color-sidebar-text-300: 58, 58, 58; /* tertiary sidebar text */
+    --color-sidebar-text-400: 115, 115, 115; /* sidebar placeholder text */
+
+    --color-sidebar-border-100: 34, 34, 34; /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: 38, 38, 38; /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: 46, 46, 46; /* strong sidebar border- 1 */
+    --color-sidebar-border-400: 58, 58, 58; /* strong sidebar border- 2 */
   }
 
   [data-theme="dark-contrast"] {
     color-scheme: dark !important;
+
+    --color-background-100: 7, 7, 7; /* primary bg */
+    --color-background-90: 11, 11, 11; /* secondary bg */
+    --color-background-80: 23, 23, 23; /* tertiary bg */
+
+    --color-text-100: 250, 250, 250; /* primary text */
+    --color-text-200: 241, 241, 241; /* secondary text */
+    --color-text-300: 212, 212, 212; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    --color-sidebar-background-100: 7, 7, 7; /* primary sidebar bg */
+    --color-sidebar-background-90: 11, 11, 11; /* secondary sidebar bg */
+    --color-sidebar-background-80: 23, 23, 23; /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: 250, 250, 250; /* primary sidebar text */
+    --color-sidebar-text-200: 241, 241, 241; /* secondary sidebar text */
+    --color-sidebar-text-300: 212, 212, 212; /* tertiary sidebar text */
+    --color-sidebar-text-400: 115, 115, 115; /* sidebar placeholder text */
+
+    --color-sidebar-border-100: 245, 245, 245; /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: 229, 229, 229; /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: 212, 212, 212; /* strong sidebar border- 1 */
+    --color-sidebar-border-400: 185, 185, 185; /* strong sidebar border- 2 */
   }
 }