chore: update shades calculation logic

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

@@ -21,14 +21,12 @@ type Props = {
 };
 
 const defaultValues = {
-  accent: "#fe5050",
   background: "#fff7f7",
-  border: "#ffc9c9",
+  text: "#ffc9c9",
+  accent: "#fe5050",
+  sidebar: "#ffffff",
   darkPalette: false,
   palette: "",
-  sidebar: "#ffffff",
-  textBase: "#430000",
-  textSecondary: "#323232",
 };
 
 export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
@@ -50,14 +48,12 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
 
   const handleFormSubmit = async (formData: ICustomTheme) => {
     const payload: ICustomTheme = {
-      accent: formData.accent,
       background: formData.background,
-      border: formData.border,
+      text: formData.text,
-      darkPalette: darkPalette,
+      accent: formData.accent,
-      palette: `${formData.background},${formData.border},${formData.sidebar},${formData.accent},${formData.textBase},${formData.textSecondary}`,
       sidebar: formData.sidebar,
-      textBase: formData.textBase,
+      darkPalette: darkPalette,
-      textSecondary: formData.textSecondary,
+      palette: `${formData.background},${formData.text},${formData.accent},${formData.sidebar}`,
     };
 
     await userService
@@ -93,7 +89,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-3">
+          <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 md:grid-cols-4">
             <div className="flex flex-col items-start gap-2">
               <h3 className="text-left text-sm font-medium text-brand-secondary">
                 Background color
@@ -108,23 +104,10 @@ 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">Border color</h3>
+              <h3 className="text-left text-sm font-medium text-brand-secondary">Text color</h3>
               <ColorPickerInput
-                name="border"
+                name="text"
-                error={errors.border}
+                error={errors.text}
-                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 background color
-              </h3>
-              <ColorPickerInput
-                name="sidebar"
-                error={errors.sidebar}
                 watch={watch}
                 setValue={setValue}
                 register={register}
@@ -144,24 +127,11 @@ export const CustomThemeSelector: React.FC<Props> = ({ preLoadedData }) => {
 
             <div className="flex flex-col items-start gap-2">
               <h3 className="text-left text-sm font-medium text-brand-secondary">
-                Primary text color
+                Sidebar background color
               </h3>
               <ColorPickerInput
-                name="textBase"
+                name="sidebar"
-                error={errors.textBase}
+                error={errors.sidebar}
-                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">
-                Secondary text color
-              </h3>
-              <ColorPickerInput
-                name="textSecondary"
-                error={errors.textSecondary}
                 watch={watch}
                 setValue={setValue}
                 register={register}

apps/app/helpers/theme.helper.ts

@@ -1,56 +1,15 @@
 import { TRgb, hexToRgb } from "helpers/color.helper";
 
-export const applyTheme = (palette: string, isDarkPalette: boolean) => {
-  // palette: [bg, border, sidebarBg, accent, textBase, textSecondary, scheme]
-  const values: string[] = palette.split(",");
-  values.push(isDarkPalette ? "dark" : "light");
-
-  for (let i = 0; i < 10; i++) {
-    const bgShades = calculateShades(values[0]);
-    const accentShades = calculateShades(values[3]);
-
-    const shade = (i === 0 ? 50 : i * 100) as keyof TShades;
-
-    const bgRgbValues = `${bgShades[shade].r}, ${bgShades[shade].g}, ${bgShades[shade].b}`;
-    const accentRgbValues = `${accentShades[shade].r}, ${accentShades[shade].g}, ${accentShades[shade].b}`;
-
-    document
-      .querySelector<HTMLElement>("[data-theme='custom']")
-      ?.style.setProperty(`--color-bg-${shade}`, bgRgbValues);
-    document
-      .querySelector<HTMLElement>("[data-theme='custom']")
-      ?.style.setProperty(`--color-accent-${shade}`, accentRgbValues);
-  }
-
-  const border = hexToRgb(values[1]);
-  document
-    .querySelector<HTMLElement>("[data-theme='custom']")
-    ?.style.setProperty("--color-border", `${border.r}, ${border.g}, ${border.b}`);
-
-  const sidebarBg = hexToRgb(values[2]);
-  document
-    .querySelector<HTMLElement>("[data-theme='custom']")
-    ?.style.setProperty("--color-bg-sidebar", `${sidebarBg.r}, ${sidebarBg.g}, ${sidebarBg.b}`);
-
-  const textBase = hexToRgb(values[4]);
-  document
-    .querySelector<HTMLElement>("[data-theme='custom']")
-    ?.style.setProperty("--color-text-base", `${textBase.r}, ${textBase.g}, ${textBase.b}`);
-
-  const textSecondary = hexToRgb(values[5]);
-  document
-    .querySelector<HTMLElement>("[data-theme='custom']")
-    ?.style.setProperty(
-      "--color-text-secondary",
-      `${textSecondary.r}, ${textSecondary.g}, ${textSecondary.b}`
-    );
-  document
-    .querySelector<HTMLElement>("[data-theme='custom']")
-    ?.style.setProperty("--color-scheme", values[6]);
-};
-
 type TShades = {
+  10: TRgb;
+  20: TRgb;
+  30: TRgb;
+  40: TRgb;
   50: TRgb;
+  60: TRgb;
+  70: TRgb;
+  80: TRgb;
+  90: TRgb;
   100: TRgb;
   200: TRgb;
   300: TRgb;
@@ -60,38 +19,33 @@ type TShades = {
   700: TRgb;
   800: TRgb;
   900: TRgb;
+  950: TRgb;
 };
 
 const calculateShades = (hexValue: string): TShades => {
   const shades: Partial<TShades> = {};
+  const { r, g, b } = hexToRgb(hexValue);
 
   const convertHexToSpecificShade = (shade: number): TRgb => {
-    const { r, g, b } = hexToRgb(hexValue);
+    if (shade <= 100) {
-
+      const decimalValue = (100 - shade) / 100;
-    if (shade > 500) {
-      let decimalValue = 0.1;
-
-      if (shade === 600) decimalValue = 0.9;
-      else if (shade === 700) decimalValue = 0.8;
-      else if (shade === 800) decimalValue = 0.7;
-      else if (shade === 900) decimalValue = 0.6;
-
-      const newR = Math.ceil(r * decimalValue);
-      const newG = Math.ceil(g * decimalValue);
-      const newB = Math.ceil(b * decimalValue);
-
-      return {
-        r: newR,
-        g: newG,
-        b: newB,
-      };
-    } else {
-      const decimalValue = 1 - (shade * 2) / 1000;
 
       const newR = Math.floor(r + (255 - r) * decimalValue);
       const newG = Math.floor(g + (255 - g) * decimalValue);
       const newB = Math.floor(b + (255 - b) * decimalValue);
 
+      return {
+        r: newR,
+        g: newG,
+        b: newB,
+      };
+    } else {
+      const decimalValue = 1 - Math.ceil((shade - 100) / 100) / 10;
+
+      const newR = Math.ceil(r * decimalValue);
+      const newG = Math.ceil(g * decimalValue);
+      const newB = Math.ceil(b * decimalValue);
+
       return {
         r: newR,
         g: newG,
@@ -100,8 +54,86 @@ const calculateShades = (hexValue: string): TShades => {
     }
   };
 
-  shades[50] = convertHexToSpecificShade(50);
+  for (let i = 10; i <= 90; i += 10) shades[i as keyof TShades] = convertHexToSpecificShade(i);
   for (let i = 100; i <= 900; i += 100) 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]
+  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 sidebarShades = calculateShades(values[3]);
+
+  for (let i = 10; i <= 90; 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 sidebarRgbValues = `${sidebarShades[shade].r}, ${sidebarShades[shade].g}, ${sidebarShades[shade].b}`;
+
+    document
+      .querySelector<HTMLElement>("[data-theme='custom']")
+      ?.style.setProperty(`--color-bg-${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);
+    document
+      .querySelector<HTMLElement>("[data-theme='custom']")
+      ?.style.setProperty(`--color-sidebar-${shade}`, sidebarRgbValues);
+  }
+  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);
+    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);
+  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

@@ -13,31 +13,73 @@ const Colors: NextPage = () => (
         <div>
           Accent:
           <div className="flex flex-wrap">
-            <div className="h-20 w-20 bg-brand-accent-50" />
+            <div className="h-12 w-12 bg-custom-accent-10" />
-            <div className="h-20 w-20 bg-brand-accent-100" />
+            <div className="h-12 w-12 bg-custom-accent-20" />
-            <div className="h-20 w-20 bg-brand-accent-200" />
+            <div className="h-12 w-12 bg-custom-accent-30" />
-            <div className="h-20 w-20 bg-brand-accent-300" />
+            <div className="h-12 w-12 bg-custom-accent-40" />
-            <div className="h-20 w-20 bg-brand-accent-400" />
+            <div className="h-12 w-12 bg-custom-accent-50" />
-            <div className="h-20 w-20 bg-brand-accent-500" />
+            <div className="h-12 w-12 bg-custom-accent-60" />
-            <div className="h-20 w-20 bg-brand-accent-600" />
+            <div className="h-12 w-12 bg-custom-accent-70" />
-            <div className="h-20 w-20 bg-brand-accent-700" />
+            <div className="h-12 w-12 bg-custom-accent-80" />
-            <div className="h-20 w-20 bg-brand-accent-800" />
+            <div className="h-12 w-12 bg-custom-accent-90" />
-            <div className="h-20 w-20 bg-brand-accent-900" />
+            <div className="h-12 w-12 bg-custom-accent-100" />
+            <div className="h-12 w-12 bg-custom-accent-200" />
+            <div className="h-12 w-12 bg-custom-accent-300" />
+            <div className="h-12 w-12 bg-custom-accent-400" />
+            <div className="h-12 w-12 bg-custom-accent-500" />
+            <div className="h-12 w-12 bg-custom-accent-600" />
+            <div className="h-12 w-12 bg-custom-accent-700" />
+            <div className="h-12 w-12 bg-custom-accent-800" />
+            <div className="h-12 w-12 bg-custom-accent-900" />
+            <div className="h-12 w-12 bg-custom-accent-950" />
           </div>
         </div>
         <div>
           Background:
           <div className="flex flex-wrap">
-            <div className="h-20 w-20 bg-brand-bg-50" />
+            <div className="h-12 w-12 bg-custom-bg-10" />
-            <div className="h-20 w-20 bg-brand-bg-100" />
+            <div className="h-12 w-12 bg-custom-bg-20" />
-            <div className="h-20 w-20 bg-brand-bg-200" />
+            <div className="h-12 w-12 bg-custom-bg-30" />
-            <div className="h-20 w-20 bg-brand-bg-300" />
+            <div className="h-12 w-12 bg-custom-bg-40" />
-            <div className="h-20 w-20 bg-brand-bg-400" />
+            <div className="h-12 w-12 bg-custom-bg-50" />
-            <div className="h-20 w-20 bg-brand-bg-500" />
+            <div className="h-12 w-12 bg-custom-bg-60" />
-            <div className="h-20 w-20 bg-brand-bg-600" />
+            <div className="h-12 w-12 bg-custom-bg-70" />
-            <div className="h-20 w-20 bg-brand-bg-700" />
+            <div className="h-12 w-12 bg-custom-bg-80" />
-            <div className="h-20 w-20 bg-brand-bg-800" />
+            <div className="h-12 w-12 bg-custom-bg-90" />
-            <div className="h-20 w-20 bg-brand-bg-900" />
+            <div className="h-12 w-12 bg-custom-bg-100" />
+            <div className="h-12 w-12 bg-custom-bg-200" />
+            <div className="h-12 w-12 bg-custom-bg-300" />
+            <div className="h-12 w-12 bg-custom-bg-400" />
+            <div className="h-12 w-12 bg-custom-bg-500" />
+            <div className="h-12 w-12 bg-custom-bg-600" />
+            <div className="h-12 w-12 bg-custom-bg-700" />
+            <div className="h-12 w-12 bg-custom-bg-800" />
+            <div className="h-12 w-12 bg-custom-bg-900" />
+            <div className="h-12 w-12 bg-custom-bg-950" />
+          </div>
+        </div>
+        <div>
+          Sidebar background:
+          <div className="flex flex-wrap">
+            <div className="h-12 w-12 bg-custom-sidebar-10" />
+            <div className="h-12 w-12 bg-custom-sidebar-20" />
+            <div className="h-12 w-12 bg-custom-sidebar-30" />
+            <div className="h-12 w-12 bg-custom-sidebar-40" />
+            <div className="h-12 w-12 bg-custom-sidebar-50" />
+            <div className="h-12 w-12 bg-custom-sidebar-60" />
+            <div className="h-12 w-12 bg-custom-sidebar-70" />
+            <div className="h-12 w-12 bg-custom-sidebar-80" />
+            <div className="h-12 w-12 bg-custom-sidebar-90" />
+            <div className="h-12 w-12 bg-custom-sidebar-100" />
+            <div className="h-12 w-12 bg-custom-sidebar-200" />
+            <div className="h-12 w-12 bg-custom-sidebar-300" />
+            <div className="h-12 w-12 bg-custom-sidebar-400" />
+            <div className="h-12 w-12 bg-custom-sidebar-500" />
+            <div className="h-12 w-12 bg-custom-sidebar-600" />
+            <div className="h-12 w-12 bg-custom-sidebar-700" />
+            <div className="h-12 w-12 bg-custom-sidebar-800" />
+            <div className="h-12 w-12 bg-custom-sidebar-900" />
+            <div className="h-12 w-12 bg-custom-sidebar-950" />
           </div>
         </div>
       </div>

apps/app/tailwind.config.js

@@ -14,9 +14,17 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brand: {
+        custom: {
           accent: {
+            10: convertToRGB("--color-accent-10"),
+            20: convertToRGB("--color-accent-20"),
+            30: convertToRGB("--color-accent-30"),
+            40: convertToRGB("--color-accent-40"),
             50: convertToRGB("--color-accent-50"),
+            60: convertToRGB("--color-accent-60"),
+            70: convertToRGB("--color-accent-70"),
+            80: convertToRGB("--color-accent-80"),
+            90: convertToRGB("--color-accent-90"),
             100: convertToRGB("--color-accent-100"),
             200: convertToRGB("--color-accent-200"),
             300: convertToRGB("--color-accent-300"),
@@ -26,10 +34,19 @@ module.exports = {
             700: convertToRGB("--color-accent-700"),
             800: convertToRGB("--color-accent-800"),
             900: convertToRGB("--color-accent-900"),
-            DEFAULT: convertToRGB("--color-accent-500"),
+            950: convertToRGB("--color-accent-950"),
+            DEFAULT: convertToRGB("--color-accent-100"),
           },
           bg: {
+            10: convertToRGB("--color-bg-10"),
+            20: convertToRGB("--color-bg-20"),
+            30: convertToRGB("--color-bg-30"),
+            40: convertToRGB("--color-bg-40"),
             50: convertToRGB("--color-bg-50"),
+            60: convertToRGB("--color-bg-60"),
+            70: convertToRGB("--color-bg-70"),
+            80: convertToRGB("--color-bg-80"),
+            90: convertToRGB("--color-bg-90"),
             100: convertToRGB("--color-bg-100"),
             200: convertToRGB("--color-bg-200"),
             300: convertToRGB("--color-bg-300"),
@@ -39,31 +56,55 @@ module.exports = {
             700: convertToRGB("--color-bg-700"),
             800: convertToRGB("--color-bg-800"),
             900: convertToRGB("--color-bg-900"),
-            DEFAULT: convertToRGB("--color-bg-500"),
+            950: convertToRGB("--color-bg-950"),
+            DEFAULT: convertToRGB("--color-bg-100"),
+          },
+          sidebar: {
+            10: convertToRGB("--color-sidebar-10"),
+            20: convertToRGB("--color-sidebar-20"),
+            30: convertToRGB("--color-sidebar-30"),
+            40: convertToRGB("--color-sidebar-40"),
+            50: convertToRGB("--color-sidebar-50"),
+            60: convertToRGB("--color-sidebar-60"),
+            70: convertToRGB("--color-sidebar-70"),
+            80: convertToRGB("--color-sidebar-80"),
+            90: convertToRGB("--color-sidebar-90"),
+            100: convertToRGB("--color-sidebar-100"),
+            200: convertToRGB("--color-sidebar-200"),
+            300: convertToRGB("--color-sidebar-300"),
+            400: convertToRGB("--color-sidebar-400"),
+            500: convertToRGB("--color-sidebar-500"),
+            600: convertToRGB("--color-sidebar-600"),
+            700: convertToRGB("--color-sidebar-700"),
+            800: convertToRGB("--color-sidebar-800"),
+            900: convertToRGB("--color-sidebar-900"),
+            950: convertToRGB("--color-sidebar-950"),
+            DEFAULT: convertToRGB("--color-sidebar-100"),
           },
-          base: withOpacity("--color-bg-base"),
-        },
-      },
-      borderColor: {
-        brand: {
-          base: withOpacity("--color-bg-400"),
-          "surface-1": withOpacity("--color-bg-surface-1"),
-          "surface-2": withOpacity("--color-bg-surface-2"),
-        },
-      },
-      backgroundColor: {
-        brand: {
-          base: withOpacity("--color-bg-500"),
-          "surface-1": withOpacity("--color-bg-700"),
-          "surface-2": withOpacity("--color-bg-900"),
-          sidebar: withOpacity("--color-bg-sidebar"),
-          backdrop: "#131313",
         },
       },
       textColor: {
-        brand: {
+        custom: {
-          base: withOpacity("--color-text-base"),
+          10: convertToRGB("--color-text-10"),
-          secondary: withOpacity("--color-text-secondary"),
+          20: convertToRGB("--color-text-20"),
+          30: convertToRGB("--color-text-30"),
+          40: convertToRGB("--color-text-40"),
+          50: convertToRGB("--color-text-50"),
+          60: convertToRGB("--color-text-60"),
+          70: convertToRGB("--color-text-70"),
+          80: convertToRGB("--color-text-80"),
+          90: convertToRGB("--color-text-90"),
+          100: convertToRGB("--color-text-100"),
+          200: convertToRGB("--color-text-200"),
+          300: convertToRGB("--color-text-300"),
+          400: convertToRGB("--color-text-400"),
+          500: convertToRGB("--color-text-500"),
+          600: convertToRGB("--color-text-600"),
+          700: convertToRGB("--color-text-700"),
+          800: convertToRGB("--color-text-800"),
+          900: convertToRGB("--color-text-900"),
+          950: convertToRGB("--color-text-950"),
+          DEFAULT: convertToRGB("--color-text-500"),
         },
       },
       keyframes: {

apps/app/types/users.d.ts

@@ -29,14 +29,12 @@ export interface IUser {
 }
 
 export interface ICustomTheme {
-  accent: string;
   background: string;
-  border: string;
+  text: string;
+  accent: string;
+  sidebar: string;
   darkPalette: boolean;
   palette: string;
-  sidebar: string;
-  textBase: string;
-  textSecondary: string;
 }
 
 export interface ICurrentUserResponse extends IUser {