chore: update theming structure (#1422)

* chore: store various shades of accent color

* refactor: custom theme selector

* refactor: custom theme selector

* chore: update custom theme input labels

* fix: color generator function logic

* fix: accent color preloaded data

* chore: new theming structure

* chore: update shades calculation logic

* refactor: variable names

* chore: update color scheming

* chore: new color scheming

* refactor: themes folder structure

* chore: update classnames according to new variables

* Revert "chore: update classnames according to new variables"

This reverts commit 60a87453b21768167e37889e709c12287ca07b08.

* chore: remove temp file

apps/app/helpers/color.helper.ts

@@ -0,0 +1,19 @@
+export type TRgb = { r: number; g: number; b: number };
+
+export const hexToRgb = (hex: string): TRgb => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+
+  return { r, g, b };
+};
+
+export const rgbToHex = (rgb: TRgb): string => {
+  const { r, g, b } = rgb;
+
+  const hexR = r.toString(16).padStart(2, "0");
+  const hexG = g.toString(16).padStart(2, "0");
+  const hexB = b.toString(16).padStart(2, "0");
+
+  return `#${hexR}${hexG}${hexB}`;
+};

apps/app/helpers/theme.helper.ts

@@ -1,35 +1,102 @@
-export const hexToRgb = (hex: string) => {
-  hex = hex.toLowerCase();
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)].join(",")
-    : null;
+import { TRgb, hexToRgb } from "helpers/color.helper";
+
+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;
+  400: TRgb;
+  500: TRgb;
+  600: TRgb;
+  700: TRgb;
+  800: TRgb;
+  900: TRgb;
+};
+
+const calculateShades = (hexValue: string): TShades => {
+  const shades: Partial<TShades> = {};
+  const { r, g, b } = hexToRgb(hexValue);
+
+  const convertHexToSpecificShade = (shade: number): TRgb => {
+    if (shade <= 100) {
+      const decimalValue = (100 - shade) / 100;
+
+      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,
+        b: newB,
+      };
+    }
+  };
+
+  for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10))
+    shades[i as keyof TShades] = convertHexToSpecificShade(i);
+
+  return shades as TShades;
 };
 
 export const applyTheme = (palette: string, isDarkPalette: boolean) => {
-  const values: string[] = [];
-  palette.split(",").map((color: string) => {
-    const cssVarColor = hexToRgb(color);
-    if (cssVarColor) values.push(cssVarColor);
-  });
-
-  const cssVars = [
-    "--color-bg-base",
-    "--color-bg-surface-1",
-    "--color-bg-surface-2",
-    "--color-border",
-    "--color-bg-sidebar",
-    "--color-accent",
-    "--color-text-base",
-    "--color-text-secondary",
-    "color-scheme",
-  ];
-
+  // palette: [bg, text, primary, sidebarBg, sidebarText]
+  const values: string[] = palette.split(",");
   values.push(isDarkPalette ? "dark" : "light");
 
-  cssVars.forEach((cssVar, i) =>
+  const bgShades = calculateShades(values[0]);
+  const textShades = calculateShades(values[1]);
+  const primaryShades = calculateShades(values[2]);
+  const sidebarBackgroundShades = calculateShades(values[3]);
+  const sidebarTextShades = calculateShades(values[4]);
+
+  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 primaryRgbValues = `${primaryShades[shade].r}, ${primaryShades[shade].g}, ${primaryShades[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(cssVar, values[i])
-  );
+      ?.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-primary-${shade}`, primaryRgbValues);
+    document
+      .querySelector<HTMLElement>("[data-theme='custom']")
+      ?.style.setProperty(`--color-sidebar-background-${shade}`, sidebarBackgroundRgbValues);
+    document
+      .querySelector<HTMLElement>("[data-theme='custom']")
+      ?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues);
+  }
+
+  document
+    .querySelector<HTMLElement>("[data-theme='custom']")
+    ?.style.setProperty("--color-scheme", values[5]);
 };