chore: Update color generation logic and fix linting issues

apps/web/lib/code-gen/generate-figma-url-token.ts

@@ -1,4 +1,5 @@
 import { BaseColors } from "@/types/app";
+
 import { colorHelper } from "../colorHelper";
 
 async function generateFigmaUrlToken(baseColors: Omit<BaseColors, "gray">) {

apps/web/lib/code-gen/generate-rnp-tokens.ts

@@ -1,6 +1,7 @@
 import { BaseColorTypes, ColorPalettes } from "@/types/app";
-import { colorStepMap } from "../colorStepMap";
+
 import { colorHelper } from "../colorHelper";
+import { colorStepMap } from "../colorStepMap";
 
 /* 
 {
@@ -54,7 +55,7 @@ export const getColorRgb = <T extends BaseColorTypes>(
 ): string => {
   const color = palette.find((color) => color.step === colorStepMap[step])
     ?.color;
-  const { r, g, b } = colorHelper.toRgb(color);
+  const { b, g, r } = colorHelper.toRgb(color);
   return `rgb(${r},${g},${b})`;
 };
 
@@ -68,35 +69,8 @@ const generateRNPTokens = (colorPalettes: ColorPalettes) => {
   const g = (color: BaseColorTypes, step: number) =>
     getColorRgb(colorPalettes[color], step);
   const lightTheme: Record<string, any> = {
-    primary: g("primary", 6),
-    onPrimary: g("primary", 0),
-    primaryContainer: g("primary", 1),
-    onPrimaryContainer: g("primary", 9),
-    secondary: g("secondary", 6),
-    onSecondary: g("secondary", 0),
-    secondaryContainer: g("secondary", 1),
-    onSecondaryContainer: g("secondary", 9),
-    tertiary: g("accent", 6),
-    onTertiary: g("accent", 0),
-    tertiaryContainer: g("accent", 1),
-    onTertiaryContainer: g("accent", 9),
-    error: "rgb(186, 26, 26)",
-    onError: "rgb(255, 255, 255)",
-    errorContainer: "rgb(255, 218, 214)",
-    onErrorContainer: "rgb(65, 0, 2)",
+    backdrop: "rgba(51, 47, 55, 0.4)",
     background: g("gray", 0),
-    onBackground: g("gray", 10),
-    surface: g("gray", 0),
-    onSurface: g("gray", 10),
-    surfaceVariant: g("gray", 1),
-    onSurfaceVariant: g("gray", 9),
-    outline: g("gray", 2),
-    outlineVariant: g("accent", 3),
-    shadow: g("gray", 10),
-    scrim: g("gray", 10),
-    inverseSurface: g("gray", 9),
-    inverseOnSurface: g("gray", 1),
-    inversePrimary: g("primary", 6),
     elevation: {
       level0: "transparent",
       level1: g("gray", 1),
@@ -105,40 +79,40 @@ const generateRNPTokens = (colorPalettes: ColorPalettes) => {
       level4: g("gray", 4),
       level5: g("gray", 5),
     },
-    surfaceDisabled: "rgba(29, 27, 30, 0.12)",
+    error: "rgb(186, 26, 26)",
+    errorContainer: "rgb(255, 218, 214)",
+    inverseOnSurface: g("gray", 1),
+    inversePrimary: g("primary", 6),
+    inverseSurface: g("gray", 9),
+    onBackground: g("gray", 10),
+    onError: "rgb(255, 255, 255)",
+    onErrorContainer: "rgb(65, 0, 2)",
+    onPrimary: g("primary", 0),
+    onPrimaryContainer: g("primary", 9),
+    onSecondary: g("secondary", 0),
+    onSecondaryContainer: g("secondary", 9),
+    onSurface: g("gray", 10),
     onSurfaceDisabled: "rgba(29, 27, 30, 0.38)",
-    backdrop: "rgba(51, 47, 55, 0.4)",
-  };
-  const darkTheme: Record<string, any> = {
+    onSurfaceVariant: g("gray", 9),
+    onTertiary: g("accent", 0),
+    onTertiaryContainer: g("accent", 9),
+    outline: g("gray", 2),
+    outlineVariant: g("accent", 3),
     primary: g("primary", 6),
-    onPrimary: g("primary", 0),
     primaryContainer: g("primary", 1),
-    onPrimaryContainer: g("primary", 9),
+    scrim: g("gray", 10),
     secondary: g("secondary", 6),
-    onSecondary: g("secondary", 0),
     secondaryContainer: g("secondary", 1),
-    onSecondaryContainer: g("secondary", 9),
+    shadow: g("gray", 10),
+    surface: g("gray", 0),
+    surfaceDisabled: "rgba(29, 27, 30, 0.12)",
+    surfaceVariant: g("gray", 1),
     tertiary: g("accent", 6),
-    onTertiary: g("accent", 0),
     tertiaryContainer: g("accent", 1),
-    onTertiaryContainer: g("accent", 9),
-    error: "rgb(186, 26, 26)",
-    onError: "rgb(255, 255, 255)",
-    errorContainer: "rgb(255, 218, 214)",
-    onErrorContainer: "rgb(65, 0, 2)",
+  };
+  const darkTheme: Record<string, any> = {
+    backdrop: "rgba(51, 47, 55, 0.4)",
     background: g("gray", 10),
-    onBackground: g("gray", 0),
-    surface: g("gray", 10),
-    onSurface: g("gray", 0),
-    surfaceVariant: g("gray", 9),
-    onSurfaceVariant: g("gray", 1),
-    outline: g("gray", 8),
-    outlineVariant: g("accent", 3),
-    shadow: g("gray", 0),
-    scrim: g("gray", 0),
-    inverseSurface: g("gray", 1),
-    inverseOnSurface: g("gray", 9),
-    inversePrimary: g("primary", 6),
     elevation: {
       level0: "transparent",
       level1: g("gray", 9),
@@ -147,13 +121,40 @@ const generateRNPTokens = (colorPalettes: ColorPalettes) => {
       level4: g("gray", 6),
       level5: g("gray", 5),
     },
-    surfaceDisabled: "rgba(29, 27, 30, 0.12)",
+    error: "rgb(186, 26, 26)",
+    errorContainer: "rgb(255, 218, 214)",
+    inverseOnSurface: g("gray", 9),
+    inversePrimary: g("primary", 6),
+    inverseSurface: g("gray", 1),
+    onBackground: g("gray", 0),
+    onError: "rgb(255, 255, 255)",
+    onErrorContainer: "rgb(65, 0, 2)",
+    onPrimary: g("primary", 0),
+    onPrimaryContainer: g("primary", 9),
+    onSecondary: g("secondary", 0),
+    onSecondaryContainer: g("secondary", 9),
+    onSurface: g("gray", 0),
     onSurfaceDisabled: "rgba(29, 27, 30, 0.38)",
-    backdrop: "rgba(51, 47, 55, 0.4)",
+    onSurfaceVariant: g("gray", 1),
+    onTertiary: g("accent", 0),
+    onTertiaryContainer: g("accent", 9),
+    outline: g("gray", 8),
+    outlineVariant: g("accent", 3),
+    primary: g("primary", 6),
+    primaryContainer: g("primary", 1),
+    scrim: g("gray", 0),
+    secondary: g("secondary", 6),
+    secondaryContainer: g("secondary", 1),
+    shadow: g("gray", 0),
+    surface: g("gray", 10),
+    surfaceDisabled: "rgba(29, 27, 30, 0.12)",
+    surfaceVariant: g("gray", 9),
+    tertiary: g("accent", 6),
+    tertiaryContainer: g("accent", 1),
   };
   const tokens = {
-    light: lightTheme,
     dark: darkTheme,
+    light: lightTheme,
   };
 
   return `export const tokens = ${JSON.stringify(tokens, null, 2)}`;