refactor: themes folder structure

apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx

@@ -22,7 +22,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
           data={[
             {
               id: "issues_closed",
-              color: "rgb(var(--color-accent))",
+              color: "rgb(var(--color-primary-100))",
               data: MONTHS_LIST.map((month) => ({
                 x: month.label.substring(0, 3),
                 y:
@@ -50,7 +50,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
             </div>
           )}
           theme={{
-            background: "rgb(var(--color-bg-base))",
+            background: "rgb(var(--color-background-100))",
           }}
           enableArea
         />

apps/app/components/core/index.ts

@@ -5,10 +5,8 @@ export * from "./gantt-chart-view";
 export * from "./list-view";
 export * from "./modals";
 export * from "./spreadsheet-view";
+export * from "./theme";
 export * from "./sidebar";
 export * from "./issues-view";
 export * from "./image-picker-popover";
 export * from "./feeds";
-export * from "./theme-switch";
-export * from "./custom-theme-selector";
-export * from "./color-picker-input";

apps/app/components/core/theme/index.ts

@@ -0,0 +1,3 @@
+export * from "./color-picker-input";
+export * from "./custom-theme-selector";
+export * from "./theme-switch";

apps/app/components/core/theme/theme-switch.tsx

@@ -82,8 +82,8 @@ export const ThemeSwitch: React.FC<Props> = ({
               document.documentElement.style.removeProperty(`--color-background-${i}`);
               document.documentElement.style.removeProperty(`--color-text-${i}`);
               document.documentElement.style.removeProperty(`--color-primary-${i}`);
-              document.documentElement.style.removeProperty(`--color-sidebarBackground-${i}`);
+              document.documentElement.style.removeProperty(`--color-sidebar-background-${i}`);
-              document.documentElement.style.removeProperty(`--color-sidebarText-${i}`);
+              document.documentElement.style.removeProperty(`--color-sidebar-text-${i}`);
             }
           }
           setTheme(value);

apps/app/constants/graph.ts

@@ -2,27 +2,27 @@
 import { Theme } from "@nivo/core";
 
 export const CHARTS_THEME: Theme = {
-  background: "rgb(var(--color-bg-surface-1))",
+  background: "rgb(var(--color-background-90))",
-  textColor: "rgb(var(--color-text-secondary))",
+  textColor: "rgb(var(--color-text-200))",
   axis: {
     domain: {
       line: {
-        stroke: "rgb(var(--color-border))",
+        stroke: "rgb(var(--color-background-80))",
         strokeWidth: 0.5,
       },
     },
   },
   tooltip: {
     container: {
-      background: "rgb(var(--color-bg-surface-2))",
+      background: "rgb(var(--color-background-80))",
-      color: "rgb(var(--color-text-secondary))",
+      color: "rgb(var(--color-text-200))",
       fontSize: "0.8rem",
-      border: "1px solid rgb(var(--color-border))",
+      border: "1px solid rgb(var(--color-background-80))",
     },
   },
   grid: {
     line: {
-      stroke: "rgb(var(--color-border))",
+      stroke: "rgb(var(--color-background-80))",
     },
   },
 };

apps/app/layouts/auth-layout/project-authorization-wrapper.tsx

@@ -94,10 +94,10 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
           <main
             className={`relative flex h-full w-full flex-col overflow-hidden ${
               bg === "primary"
-                ? "bg-brand-surface-1"
+                ? "bg-brand-base"
                 : bg === "secondary"
-                ? "bg-brand-sidebar"
+                ? "bg-brand-surface-1"
-                : "bg-brand-base"
+                : "bg-brand-surface-2"
             }`}
           >
             <AppHeader

apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx

@@ -101,10 +101,10 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
             <main
               className={`relative flex h-full w-full flex-col overflow-hidden ${
                 bg === "primary"
-                  ? "bg-brand-surface-1"
+                  ? "bg-brand-base"
                   : bg === "secondary"
-                  ? "bg-brand-sidebar"
+                  ? "bg-brand-surface-1"
-                  : "bg-brand-base"
+                  : "bg-brand-surface-2"
               }`}
             >
               <AppHeader

apps/app/styles/globals.css

@@ -153,6 +153,63 @@
     --color-background-700: 38, 38, 38;
     --color-background-800: 34, 34, 34;
     --color-background-900: 23, 23, 23;
+
+    --color-text-10: 250, 250, 250;
+    --color-text-20: 245, 245, 245;
+    --color-text-30: 241, 241, 241;
+    --color-text-40: 229, 229, 229;
+    --color-text-50: 212, 212, 212;
+    --color-text-60: 185, 185, 185;
+    --color-text-70: 163, 163, 163;
+    --color-text-80: 157, 157, 157;
+    --color-text-90: 129, 129, 129;
+    --color-text-100: 115, 115, 115;
+    --color-text-200: 104, 104, 104;
+    --color-text-300: 82, 82, 82;
+    --color-text-400: 64, 64, 64;
+    --color-text-500: 58, 58, 58;
+    --color-text-600: 46, 46, 46;
+    --color-text-700: 38, 38, 38;
+    --color-text-800: 34, 34, 34;
+    --color-text-900: 23, 23, 23;
+
+    --color-sidebar-background-10: 250, 250, 250;
+    --color-sidebar-background-20: 245, 245, 245;
+    --color-sidebar-background-30: 241, 241, 241;
+    --color-sidebar-background-40: 229, 229, 229;
+    --color-sidebar-background-50: 212, 212, 212;
+    --color-sidebar-background-60: 185, 185, 185;
+    --color-sidebar-background-70: 163, 163, 163;
+    --color-sidebar-background-80: 157, 157, 157;
+    --color-sidebar-background-90: 129, 129, 129;
+    --color-sidebar-background-100: 115, 115, 115;
+    --color-sidebar-background-200: 104, 104, 104;
+    --color-sidebar-background-300: 82, 82, 82;
+    --color-sidebar-background-400: 64, 64, 64;
+    --color-sidebar-background-500: 58, 58, 58;
+    --color-sidebar-background-600: 46, 46, 46;
+    --color-sidebar-background-700: 38, 38, 38;
+    --color-sidebar-background-800: 34, 34, 34;
+    --color-sidebar-background-900: 23, 23, 23;
+
+    --color-sidebar-text-10: 250, 250, 250;
+    --color-sidebar-text-20: 245, 245, 245;
+    --color-sidebar-text-30: 241, 241, 241;
+    --color-sidebar-text-40: 229, 229, 229;
+    --color-sidebar-text-50: 212, 212, 212;
+    --color-sidebar-text-60: 185, 185, 185;
+    --color-sidebar-text-70: 163, 163, 163;
+    --color-sidebar-text-80: 157, 157, 157;
+    --color-sidebar-text-90: 129, 129, 129;
+    --color-sidebar-text-100: 115, 115, 115;
+    --color-sidebar-text-200: 104, 104, 104;
+    --color-sidebar-text-300: 82, 82, 82;
+    --color-sidebar-text-400: 64, 64, 64;
+    --color-sidebar-text-500: 58, 58, 58;
+    --color-sidebar-text-600: 46, 46, 46;
+    --color-sidebar-text-700: 38, 38, 38;
+    --color-sidebar-text-800: 34, 34, 34;
+    --color-sidebar-text-900: 23, 23, 23;
   }
 
   [data-theme="light-contrast"] {

apps/app/tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
       borderColor: {
         brand: {
           base: convertToRGB("--color-background-80"),
+          secondary: convertToRGB("--color-background-90"),
         },
       },
       backgroundColor: {