chore: update color scheming

apps/app/components/core/color-picker-input.tsx

@@ -16,9 +16,11 @@ import { Popover, Transition } from "@headlessui/react";
 import { Input } from "components/ui";
 // icons
 import { ColorPickerIcon } from "components/icons";
+// types
+import { ICustomTheme } from "types";
 
 type Props = {
-  name: string;
+  name: keyof ICustomTheme;
   watch: UseFormWatch<any>;
   setValue: UseFormSetValue<any>;
   error: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
@@ -31,31 +33,25 @@ export const ColorPickerInput: React.FC<Props> = ({ name, watch, setValue, error
     setValue(name, hex);
   };
 
-  const getColorText = (colorName: string) => {
+  const getColorText = (colorName: keyof ICustomTheme) => {
     switch (colorName) {
-      case "accent":
+      case "background":
-        return "Accent";
-      case "bgBase":
         return "Background";
-      case "bgSurface1":
+      case "text":
-        return "Background surface 1";
+        return "Text";
-      case "bgSurface2":
+      case "primary":
-        return "Background surface 2";
+        return "Primary(Theme)";
-      case "border":
+      case "sidebarBackground":
-        return "Border";
+        return "Sidebar Background";
-      case "sidebar":
+      case "sidebarText":
-        return "Sidebar";
+        return "Sidebar Text";
-      case "textBase":
-        return "Text primary";
-      case "textSecondary":
-        return "Text secondary";
       default:
         return "Color";
     }
   };
 
   return (
-    <div className="relative ">
+    <div className="relative">
       <Input
         id={name}
         name={name}

apps/app/components/core/custom-theme-selector.tsx

@@ -20,11 +20,12 @@ type Props = {
   preLoadedData?: Partial<ICustomTheme> | null;
 };
 
-const defaultValues = {
+const defaultValues: ICustomTheme = {
   background: "#fff7f7",
   text: "#ffc9c9",
-  accent: "#fe5050",
+  primary: "#fe5050",
-  sidebar: "#ffffff",
+  sidebarBackground: "#ffffff",
+  sidebarText: "#000000",
   darkPalette: false,
   palette: "",
 };
@@ -50,10 +51,11 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
     const payload: ICustomTheme = {
       background: formData.background,
       text: formData.text,
-      accent: formData.accent,
+      primary: formData.primary,
-      sidebar: formData.sidebar,
+      sidebarBackground: formData.sidebarBackground,
+      sidebarText: formData.sidebarText,
       darkPalette: darkPalette,
-      palette: `${formData.background},${formData.text},${formData.accent},${formData.sidebar}`,
+      palette: `${formData.background},${formData.text},${formData.primary},${formData.sidebarBackground},${formData.sidebarText}`,
     };
 
     await userService
@@ -89,7 +91,7 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
       <div className="space-y-5">
         <h3 className="text-lg font-semibold text-brand-base">Customize your theme</h3>
         <div className="space-y-4">
-          <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 md:grid-cols-4">
+          <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 md:grid-cols-3">
             <div className="flex flex-col items-start gap-2">
               <h3 className="text-left text-sm font-medium text-brand-secondary">
                 Background color
@@ -115,10 +117,12 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-brand-secondary">Accent color</h3>
+              <h3 className="text-left text-sm font-medium text-brand-secondary">
+                Primary(Theme) color
+              </h3>
               <ColorPickerInput
-                name="accent"
+                name="primary"
-                error={errors.accent}
+                error={errors.primary}
                 watch={watch}
                 setValue={setValue}
                 register={register}
@@ -130,8 +134,21 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
                 Sidebar background color
               </h3>
               <ColorPickerInput
-                name="sidebar"
+                name="sidebarBackground"
-                error={errors.sidebar}
+                error={errors.sidebarBackground}
+                watch={watch}
+                setValue={setValue}
+                register={register}
+              />
+            </div>
+
+            <div className="flex flex-col items-start gap-2">
+              <h3 className="text-left text-sm font-medium text-brand-secondary">
+                Sidebar text color
+              </h3>
+              <ColorPickerInput
+                name="sidebarText"
+                error={errors.sidebarText}
                 watch={watch}
                 setValue={setValue}
                 register={register}

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

@@ -77,37 +77,14 @@ export const ThemeSwitch: React.FC<Props> = ({
             if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
           } else {
             if (customThemeSelectorOptions) setCustomThemeSelectorOptions(false);
-            const cssVars = [
-              "--color-bg-50",
-              "--color-bg-100",
-              "--color-bg-200",
-              "--color-bg-300",
-              "--color-bg-400",
-              "--color-bg-500",
-              "--color-bg-600",
-              "--color-bg-700",
-              "--color-bg-800",
-              "--color-bg-900",
 
-              "--color-bg-sidebar",
+            for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10)) {
-
+              document.documentElement.style.removeProperty(`--color-background-${i}`);
-              "--color-border",
+              document.documentElement.style.removeProperty(`--color-text-${i}`);
-
+              document.documentElement.style.removeProperty(`--color-primary-${i}`);
-              "--color-accent-50",
+              document.documentElement.style.removeProperty(`--color-sidebarBackground-${i}`);
-              "--color-accent-100",
+              document.documentElement.style.removeProperty(`--color-sidebarText-${i}`);
-              "--color-accent-200",
+            }
-              "--color-accent-300",
-              "--color-accent-400",
-              "--color-accent-500",
-              "--color-accent-600",
-              "--color-accent-700",
-              "--color-accent-800",
-              "--color-accent-900",
-
-              "--color-text-base",
-              "--color-text-secondary",
-            ];
-            cssVars.forEach((cssVar) => document.documentElement.style.removeProperty(cssVar));
           }
           setTheme(value);
           document.documentElement.style.setProperty("color-scheme", type);

apps/app/helpers/theme.helper.ts

@@ -19,7 +19,6 @@ type TShades = {
   700: TRgb;
   800: TRgb;
   900: TRgb;
-  950: TRgb;
 };
 
 const calculateShades = (hexValue: string): TShades => {
@@ -54,86 +53,50 @@ const calculateShades = (hexValue: string): TShades => {
     }
   };
 
-  for (let i = 10; i <= 90; i += 10) shades[i as keyof TShades] = convertHexToSpecificShade(i);
+  for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10))
-  for (let i = 100; i <= 900; i += 100) shades[i as keyof TShades] = convertHexToSpecificShade(i);
+    shades[i as keyof TShades] = convertHexToSpecificShade(i);
-
-  shades[950 as keyof TShades] = convertHexToSpecificShade(950);
 
   return shades as TShades;
 };
 
 export const applyTheme = (palette: string, isDarkPalette: boolean) => {
-  // palette: [bg, text, accent, sidebarBg]
+  // palette: [bg, text, primary, sidebarBg, sidebarText]
   const values: string[] = palette.split(",");
   values.push(isDarkPalette ? "dark" : "light");
 
   const bgShades = calculateShades(values[0]);
   const textShades = calculateShades(values[1]);
-  const accentShades = calculateShades(values[2]);
+  const primaryShades = calculateShades(values[2]);
-  const sidebarShades = calculateShades(values[3]);
+  const sidebarBackgroundShades = calculateShades(values[3]);
+  const sidebarTextShades = calculateShades(values[4]);
 
-  for (let i = 10; i <= 90; i += 10) {
+  for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10)) {
     const shade = i as keyof TShades;
 
     const bgRgbValues = `${bgShades[shade].r}, ${bgShades[shade].g}, ${bgShades[shade].b}`;
     const textRgbValues = `${textShades[shade].r}, ${textShades[shade].g}, ${textShades[shade].b}`;
-    const accentRgbValues = `${accentShades[shade].r}, ${accentShades[shade].g}, ${accentShades[shade].b}`;
+    const primaryRgbValues = `${primaryShades[shade].r}, ${primaryShades[shade].g}, ${primaryShades[shade].b}`;
-    const sidebarRgbValues = `${sidebarShades[shade].r}, ${sidebarShades[shade].g}, ${sidebarShades[shade].b}`;
+    const sidebarBackgroundRgbValues = `${sidebarBackgroundShades[shade].r}, ${sidebarBackgroundShades[shade].g}, ${sidebarBackgroundShades[shade].b}`;
+    const sidebarTextRgbValues = `${sidebarTextShades[shade].r}, ${sidebarTextShades[shade].g}, ${sidebarTextShades[shade].b}`;
 
     document
       .querySelector<HTMLElement>("[data-theme='custom']")
-      ?.style.setProperty(`--color-bg-${shade}`, bgRgbValues);
+      ?.style.setProperty(`--color-background-${shade}`, bgRgbValues);
     document
       .querySelector<HTMLElement>("[data-theme='custom']")
       ?.style.setProperty(`--color-text-${shade}`, textRgbValues);
     document
       .querySelector<HTMLElement>("[data-theme='custom']")
-      ?.style.setProperty(`--color-accent-${shade}`, accentRgbValues);
+      ?.style.setProperty(`--color-primary-${shade}`, primaryRgbValues);
     document
       .querySelector<HTMLElement>("[data-theme='custom']")
-      ?.style.setProperty(`--color-sidebar-${shade}`, sidebarRgbValues);
+      ?.style.setProperty(`--color-sidebar-background-${shade}`, sidebarBackgroundRgbValues);
-  }
-  for (let i = 100; i <= 900; i += 100) {
-    const shade = i as keyof TShades;
-
-    const bgRgbValues = `${bgShades[shade].r}, ${bgShades[shade].g}, ${bgShades[shade].b}`;
-    const textRgbValues = `${textShades[shade].r}, ${textShades[shade].g}, ${textShades[shade].b}`;
-    const accentRgbValues = `${accentShades[shade].r}, ${accentShades[shade].g}, ${accentShades[shade].b}`;
-    const sidebarRgbValues = `${sidebarShades[shade].r}, ${sidebarShades[shade].g}, ${sidebarShades[shade].b}`;
-
     document
       .querySelector<HTMLElement>("[data-theme='custom']")
-      ?.style.setProperty(`--color-bg-${shade}`, bgRgbValues);
+      ?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues);
-    document
-      .querySelector<HTMLElement>("[data-theme='custom']")
-      ?.style.setProperty(`--color-text-${shade}`, textRgbValues);
-    document
-      .querySelector<HTMLElement>("[data-theme='custom']")
-      ?.style.setProperty(`--color-accent-${shade}`, accentRgbValues);
-    document
-      .querySelector<HTMLElement>("[data-theme='custom']")
-      ?.style.setProperty(`--color-sidebar-${shade}`, sidebarRgbValues);
   }
 
-  const bgRgbValues = `${bgShades[950].r}, ${bgShades[950].g}, ${bgShades[950].b}`;
-  const textRgbValues = `${textShades[950].r}, ${textShades[950].g}, ${textShades[950].b}`;
-  const accentRgbValues = `${accentShades[950].r}, ${accentShades[950].g}, ${accentShades[950].b}`;
-  const sidebarRgbValues = `${sidebarShades[950].r}, ${sidebarShades[950].g}, ${sidebarShades[950].b}`;
-
   document
     .querySelector<HTMLElement>("[data-theme='custom']")
-    ?.style.setProperty(`--color-bg-${950}`, bgRgbValues);
+    ?.style.setProperty("--color-scheme", values[5]);
-  document
-    .querySelector<HTMLElement>("[data-theme='custom']")
-    ?.style.setProperty(`--color-text-${950}`, textRgbValues);
-  document
-    .querySelector<HTMLElement>("[data-theme='custom']")
-    ?.style.setProperty(`--color-accent-${950}`, accentRgbValues);
-  document
-    .querySelector<HTMLElement>("[data-theme='custom']")
-    ?.style.setProperty(`--color-sidebar-${950}`, sidebarRgbValues);
-
-  document
-    .querySelector<HTMLElement>("[data-theme='custom']")
-    ?.style.setProperty("--color-scheme", values[4]);
 };

apps/app/pages/colors.tsx

@@ -11,75 +11,128 @@ const Colors: NextPage = () => (
     <DefaultLayout>
       <div className="space-y-8 p-8">
         <div>
-          Accent:
+          Primary:
           <div className="flex flex-wrap">
-            <div className="h-12 w-12 bg-custom-accent-10" />
+            <div className="h-12 w-12 bg-custom-primary-0" />
-            <div className="h-12 w-12 bg-custom-accent-20" />
+            <div className="h-12 w-12 bg-custom-primary-10" />
-            <div className="h-12 w-12 bg-custom-accent-30" />
+            <div className="h-12 w-12 bg-custom-primary-20" />
-            <div className="h-12 w-12 bg-custom-accent-40" />
+            <div className="h-12 w-12 bg-custom-primary-30" />
-            <div className="h-12 w-12 bg-custom-accent-50" />
+            <div className="h-12 w-12 bg-custom-primary-40" />
-            <div className="h-12 w-12 bg-custom-accent-60" />
+            <div className="h-12 w-12 bg-custom-primary-50" />
-            <div className="h-12 w-12 bg-custom-accent-70" />
+            <div className="h-12 w-12 bg-custom-primary-60" />
-            <div className="h-12 w-12 bg-custom-accent-80" />
+            <div className="h-12 w-12 bg-custom-primary-70" />
-            <div className="h-12 w-12 bg-custom-accent-90" />
+            <div className="h-12 w-12 bg-custom-primary-80" />
-            <div className="h-12 w-12 bg-custom-accent-100" />
+            <div className="h-12 w-12 bg-custom-primary-90" />
-            <div className="h-12 w-12 bg-custom-accent-200" />
+            <div className="h-12 w-12 bg-custom-primary-100" />
-            <div className="h-12 w-12 bg-custom-accent-300" />
+            <div className="h-12 w-12 bg-custom-primary-200" />
-            <div className="h-12 w-12 bg-custom-accent-400" />
+            <div className="h-12 w-12 bg-custom-primary-300" />
-            <div className="h-12 w-12 bg-custom-accent-500" />
+            <div className="h-12 w-12 bg-custom-primary-400" />
-            <div className="h-12 w-12 bg-custom-accent-600" />
+            <div className="h-12 w-12 bg-custom-primary-500" />
-            <div className="h-12 w-12 bg-custom-accent-700" />
+            <div className="h-12 w-12 bg-custom-primary-600" />
-            <div className="h-12 w-12 bg-custom-accent-800" />
+            <div className="h-12 w-12 bg-custom-primary-700" />
-            <div className="h-12 w-12 bg-custom-accent-900" />
+            <div className="h-12 w-12 bg-custom-primary-800" />
-            <div className="h-12 w-12 bg-custom-accent-950" />
+            <div className="h-12 w-12 bg-custom-primary-900" />
+            <div className="h-12 w-12 bg-custom-primary-1000" />
           </div>
         </div>
         <div>
           Background:
           <div className="flex flex-wrap">
-            <div className="h-12 w-12 bg-custom-bg-10" />
+            <div className="h-12 w-12 bg-custom-background-0" />
-            <div className="h-12 w-12 bg-custom-bg-20" />
+            <div className="h-12 w-12 bg-custom-background-10" />
-            <div className="h-12 w-12 bg-custom-bg-30" />
+            <div className="h-12 w-12 bg-custom-background-20" />
-            <div className="h-12 w-12 bg-custom-bg-40" />
+            <div className="h-12 w-12 bg-custom-background-30" />
-            <div className="h-12 w-12 bg-custom-bg-50" />
+            <div className="h-12 w-12 bg-custom-background-40" />
-            <div className="h-12 w-12 bg-custom-bg-60" />
+            <div className="h-12 w-12 bg-custom-background-50" />
-            <div className="h-12 w-12 bg-custom-bg-70" />
+            <div className="h-12 w-12 bg-custom-background-60" />
-            <div className="h-12 w-12 bg-custom-bg-80" />
+            <div className="h-12 w-12 bg-custom-background-70" />
-            <div className="h-12 w-12 bg-custom-bg-90" />
+            <div className="h-12 w-12 bg-custom-background-80" />
-            <div className="h-12 w-12 bg-custom-bg-100" />
+            <div className="h-12 w-12 bg-custom-background-90" />
-            <div className="h-12 w-12 bg-custom-bg-200" />
+            <div className="h-12 w-12 bg-custom-background-100" />
-            <div className="h-12 w-12 bg-custom-bg-300" />
+            <div className="h-12 w-12 bg-custom-background-200" />
-            <div className="h-12 w-12 bg-custom-bg-400" />
+            <div className="h-12 w-12 bg-custom-background-300" />
-            <div className="h-12 w-12 bg-custom-bg-500" />
+            <div className="h-12 w-12 bg-custom-background-400" />
-            <div className="h-12 w-12 bg-custom-bg-600" />
+            <div className="h-12 w-12 bg-custom-background-500" />
-            <div className="h-12 w-12 bg-custom-bg-700" />
+            <div className="h-12 w-12 bg-custom-background-600" />
-            <div className="h-12 w-12 bg-custom-bg-800" />
+            <div className="h-12 w-12 bg-custom-background-700" />
-            <div className="h-12 w-12 bg-custom-bg-900" />
+            <div className="h-12 w-12 bg-custom-background-800" />
-            <div className="h-12 w-12 bg-custom-bg-950" />
+            <div className="h-12 w-12 bg-custom-background-900" />
+            <div className="h-12 w-12 bg-custom-background-1000" />
           </div>
         </div>
         <div>
-          Sidebar background:
+          Text:
           <div className="flex flex-wrap">
-            <div className="h-12 w-12 bg-custom-sidebar-10" />
+            <div className="h-12 w-12 bg-custom-text-0" />
-            <div className="h-12 w-12 bg-custom-sidebar-20" />
+            <div className="h-12 w-12 bg-custom-text-10" />
-            <div className="h-12 w-12 bg-custom-sidebar-30" />
+            <div className="h-12 w-12 bg-custom-text-20" />
-            <div className="h-12 w-12 bg-custom-sidebar-40" />
+            <div className="h-12 w-12 bg-custom-text-30" />
-            <div className="h-12 w-12 bg-custom-sidebar-50" />
+            <div className="h-12 w-12 bg-custom-text-40" />
-            <div className="h-12 w-12 bg-custom-sidebar-60" />
+            <div className="h-12 w-12 bg-custom-text-50" />
-            <div className="h-12 w-12 bg-custom-sidebar-70" />
+            <div className="h-12 w-12 bg-custom-text-60" />
-            <div className="h-12 w-12 bg-custom-sidebar-80" />
+            <div className="h-12 w-12 bg-custom-text-70" />
-            <div className="h-12 w-12 bg-custom-sidebar-90" />
+            <div className="h-12 w-12 bg-custom-text-80" />
-            <div className="h-12 w-12 bg-custom-sidebar-100" />
+            <div className="h-12 w-12 bg-custom-text-90" />
-            <div className="h-12 w-12 bg-custom-sidebar-200" />
+            <div className="h-12 w-12 bg-custom-text-100" />
-            <div className="h-12 w-12 bg-custom-sidebar-300" />
+            <div className="h-12 w-12 bg-custom-text-200" />
-            <div className="h-12 w-12 bg-custom-sidebar-400" />
+            <div className="h-12 w-12 bg-custom-text-300" />
-            <div className="h-12 w-12 bg-custom-sidebar-500" />
+            <div className="h-12 w-12 bg-custom-text-400" />
-            <div className="h-12 w-12 bg-custom-sidebar-600" />
+            <div className="h-12 w-12 bg-custom-text-500" />
-            <div className="h-12 w-12 bg-custom-sidebar-700" />
+            <div className="h-12 w-12 bg-custom-text-600" />
-            <div className="h-12 w-12 bg-custom-sidebar-800" />
+            <div className="h-12 w-12 bg-custom-text-700" />
-            <div className="h-12 w-12 bg-custom-sidebar-900" />
+            <div className="h-12 w-12 bg-custom-text-800" />
-            <div className="h-12 w-12 bg-custom-sidebar-950" />
+            <div className="h-12 w-12 bg-custom-text-900" />
+            <div className="h-12 w-12 bg-custom-text-1000" />
+          </div>
+        </div>
+        <div>
+          Sidebar Background:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-sidebar-background-0" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-10" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-20" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-30" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-40" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-50" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-60" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-70" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-80" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-90" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-100" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-200" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-300" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-400" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-500" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-600" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-700" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-800" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-900" />
+            <div className="h-12 w-12 bg-custom-sidebar-background-1000" />
+          </div>
+        </div>
+        <div>
+          Sidebar Text:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-sidebar-text-0" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-10" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-20" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-30" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-40" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-50" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-60" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-70" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-80" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-90" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-100" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-200" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-300" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-400" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-500" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-600" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-700" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-800" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-900" />
+            <div className="h-12 w-12 bg-custom-sidebar-text-1000" />
           </div>
         </div>
       </div>

apps/app/tailwind.config.js

@@ -1,11 +1,3 @@
-function withOpacity(variableName) {
-  return ({ opacityValue }) => {
-    if (opacityValue !== undefined) return `rgba(var(${variableName}), ${opacityValue})`;
-
-    return `rgb(var(${variableName}))`;
-  };
-}
-
 const convertToRGB = (variableName) => `rgb(var(${variableName}))`;
 
 module.exports = {
@@ -16,50 +8,53 @@ module.exports = {
       colors: {
         custom: {
           primary: {
-            10: convertToRGB("--color-accent-10"),
+            0: "rgb(255, 255, 255)",
-            20: convertToRGB("--color-accent-20"),
+            10: convertToRGB("--color-primary-10"),
-            30: convertToRGB("--color-accent-30"),
+            20: convertToRGB("--color-primary-20"),
-            40: convertToRGB("--color-accent-40"),
+            30: convertToRGB("--color-primary-30"),
-            50: convertToRGB("--color-accent-50"),
+            40: convertToRGB("--color-primary-40"),
-            60: convertToRGB("--color-accent-60"),
+            50: convertToRGB("--color-primary-50"),
-            70: convertToRGB("--color-accent-70"),
+            60: convertToRGB("--color-primary-60"),
-            80: convertToRGB("--color-accent-80"),
+            70: convertToRGB("--color-primary-70"),
-            90: convertToRGB("--color-accent-90"),
+            80: convertToRGB("--color-primary-80"),
-            100: convertToRGB("--color-accent-100"),
+            90: convertToRGB("--color-primary-90"),
-            200: convertToRGB("--color-accent-200"),
+            100: convertToRGB("--color-primary-100"),
-            300: convertToRGB("--color-accent-300"),
+            200: convertToRGB("--color-primary-200"),
-            400: convertToRGB("--color-accent-400"),
+            300: convertToRGB("--color-primary-300"),
-            500: convertToRGB("--color-accent-500"),
+            400: convertToRGB("--color-primary-400"),
-            600: convertToRGB("--color-accent-600"),
+            500: convertToRGB("--color-primary-500"),
-            700: convertToRGB("--color-accent-700"),
+            600: convertToRGB("--color-primary-600"),
-            800: convertToRGB("--color-accent-800"),
+            700: convertToRGB("--color-primary-700"),
-            900: convertToRGB("--color-accent-900"),
+            800: convertToRGB("--color-primary-800"),
-            950: convertToRGB("--color-accent-950"),
+            900: convertToRGB("--color-primary-900"),
-            DEFAULT: convertToRGB("--color-accent-100"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-primary-100"),
           },
           background: {
-            10: convertToRGB("--color-bg-10"),
+            0: "rgb(255, 255, 255)",
-            20: convertToRGB("--color-bg-20"),
+            10: convertToRGB("--color-background-10"),
-            30: convertToRGB("--color-bg-30"),
+            20: convertToRGB("--color-background-20"),
-            40: convertToRGB("--color-bg-40"),
+            30: convertToRGB("--color-background-30"),
-            50: convertToRGB("--color-bg-50"),
+            40: convertToRGB("--color-background-40"),
-            60: convertToRGB("--color-bg-60"),
+            50: convertToRGB("--color-background-50"),
-            70: convertToRGB("--color-bg-70"),
+            60: convertToRGB("--color-background-60"),
-            80: convertToRGB("--color-bg-80"),
+            70: convertToRGB("--color-background-70"),
-            90: convertToRGB("--color-bg-90"),
+            80: convertToRGB("--color-background-80"),
-            100: convertToRGB("--color-bg-100"),
+            90: convertToRGB("--color-background-90"),
-            200: convertToRGB("--color-bg-200"),
+            100: convertToRGB("--color-background-100"),
-            300: convertToRGB("--color-bg-300"),
+            200: convertToRGB("--color-background-200"),
-            400: convertToRGB("--color-bg-400"),
+            300: convertToRGB("--color-background-300"),
-            500: convertToRGB("--color-bg-500"),
+            400: convertToRGB("--color-background-400"),
-            600: convertToRGB("--color-bg-600"),
+            500: convertToRGB("--color-background-500"),
-            700: convertToRGB("--color-bg-700"),
+            600: convertToRGB("--color-background-600"),
-            800: convertToRGB("--color-bg-800"),
+            700: convertToRGB("--color-background-700"),
-            900: convertToRGB("--color-bg-900"),
+            800: convertToRGB("--color-background-800"),
-            950: convertToRGB("--color-bg-950"),
+            900: convertToRGB("--color-background-900"),
-            DEFAULT: convertToRGB("--color-bg-100"),
+            1000: "rgb(0, 0, 0)",
+            DEFAULT: convertToRGB("--color-background-100"),
           },
           text: {
+            0: "rgb(255, 255, 255)",
             10: convertToRGB("--color-text-10"),
             20: convertToRGB("--color-text-20"),
             30: convertToRGB("--color-text-30"),
@@ -78,33 +73,35 @@ module.exports = {
             700: convertToRGB("--color-text-700"),
             800: convertToRGB("--color-text-800"),
             900: convertToRGB("--color-text-900"),
-            950: convertToRGB("--color-text-950"),
+            1000: "rgb(0, 0, 0)",
-            DEFAULT: convertToRGB("--color-text-500"),
+            DEFAULT: convertToRGB("--color-text-100"),
           },
           sidebar: {
             background: {
-              10: convertToRGB("--color-sidebar-bg-10"),
+              0: "rgb(255, 255, 255)",
-              20: convertToRGB("--color-sidebar-bg-20"),
+              10: convertToRGB("--color-sidebar-background-10"),
-              30: convertToRGB("--color-sidebar-bg-30"),
+              20: convertToRGB("--color-sidebar-background-20"),
-              40: convertToRGB("--color-sidebar-bg-40"),
+              30: convertToRGB("--color-sidebar-background-30"),
-              50: convertToRGB("--color-sidebar-bg-50"),
+              40: convertToRGB("--color-sidebar-background-40"),
-              60: convertToRGB("--color-sidebar-bg-60"),
+              50: convertToRGB("--color-sidebar-background-50"),
-              70: convertToRGB("--color-sidebar-bg-70"),
+              60: convertToRGB("--color-sidebar-background-60"),
-              80: convertToRGB("--color-sidebar-bg-80"),
+              70: convertToRGB("--color-sidebar-background-70"),
-              90: convertToRGB("--color-sidebar-bg-90"),
+              80: convertToRGB("--color-sidebar-background-80"),
-              100: convertToRGB("--color-sidebar-bg-100"),
+              90: convertToRGB("--color-sidebar-background-90"),
-              200: convertToRGB("--color-sidebar-bg-200"),
+              100: convertToRGB("--color-sidebar-background-100"),
-              300: convertToRGB("--color-sidebar-bg-300"),
+              200: convertToRGB("--color-sidebar-background-200"),
-              400: convertToRGB("--color-sidebar-bg-400"),
+              300: convertToRGB("--color-sidebar-background-300"),
-              500: convertToRGB("--color-sidebar-bg-500"),
+              400: convertToRGB("--color-sidebar-background-400"),
-              600: convertToRGB("--color-sidebar-bg-600"),
+              500: convertToRGB("--color-sidebar-background-500"),
-              700: convertToRGB("--color-sidebar-bg-700"),
+              600: convertToRGB("--color-sidebar-background-600"),
-              800: convertToRGB("--color-sidebar-bg-800"),
+              700: convertToRGB("--color-sidebar-background-700"),
-              900: convertToRGB("--color-sidebar-bg-900"),
+              800: convertToRGB("--color-sidebar-background-800"),
-              950: convertToRGB("--color-sidebar-bg-950"),
+              900: convertToRGB("--color-sidebar-background-900"),
-              DEFAULT: convertToRGB("--color-sidebar-bg-100"),
+              1000: "rgb(0, 0, 0)",
+              DEFAULT: convertToRGB("--color-sidebar-background-100"),
             },
             text: {
+              0: "rgb(255, 255, 255)",
               10: convertToRGB("--color-sidebar-text-10"),
               20: convertToRGB("--color-sidebar-text-20"),
               30: convertToRGB("--color-sidebar-text-30"),
@@ -123,7 +120,7 @@ module.exports = {
               700: convertToRGB("--color-sidebar-text-700"),
               800: convertToRGB("--color-sidebar-text-800"),
               900: convertToRGB("--color-sidebar-text-900"),
-              950: convertToRGB("--color-sidebar-text-950"),
+              1000: "rgb(0, 0, 0)",
               DEFAULT: convertToRGB("--color-sidebar-text-100"),
             },
           },
@@ -146,7 +143,7 @@ module.exports = {
             "--tw-prose-p": `${convertToRGB("--color-text-base")}`,
             "--tw-prose-headings": `${convertToRGB("--color-text-base")}`,
             "--tw-prose-lead": `${convertToRGB("--color-text-base")}`,
-            "--tw-prose-links": `${convertToRGB("--color-accent")}`,
+            "--tw-prose-links": `${convertToRGB("--color-primary-100")}`,
             "--tw-prose-bold": `${convertToRGB("--color-text-base")}`,
             "--tw-prose-counters": `${convertToRGB("--color-text-base")}`,
             "--tw-prose-bullets": `${convertToRGB("--color-text-base")}`,

apps/app/types/users.d.ts

@@ -31,8 +31,9 @@ export interface IUser {
 export interface ICustomTheme {
   background: string;
   text: string;
-  accent: string;
+  primary: string;
-  sidebar: string;
+  sidebarBackground: string;
+  sidebarText: string;
   darkPalette: boolean;
   palette: string;
 }