fix: fix lint errors in utils (#699)

* fix: fix lint errors in utils

* refactor: cleaned up type in jsoncolor

Author: brianacnguyen

docs/utils/getCSSVariablesFromStylesheet.ts

@@ -22,12 +22,20 @@ export const getCSSVariablesFromStylesheet = (varPrefix: string): Color => {
         // Access rules from the stylesheet, handle security errors when accessing cross-origin stylesheets
         return Array.from(styleSheet.cssRules);
       } catch (err) {
-        console.error(
-          'Access denied to stylesheet: ',
-          styleSheet.href,
-          '; Error: ',
-          err.message,
-        );
+        if (err instanceof Error) {
+          console.error(
+            'Access denied to stylesheet: ',
+            styleSheet.href,
+            '; Error: ',
+            err.message,
+          );
+        } else {
+          console.error(
+            'Access denied to stylesheet: ',
+            styleSheet.href,
+            '; Unknown error occurred.',
+          );
+        }
         return [];
       }
     })
@@ -47,7 +55,7 @@ export const getCSSVariablesFromStylesheet = (varPrefix: string): Color => {
       // Iterate over each property in the style rule
       for (let i = 0; i < style.length; i++) {
         const varName = style[i];
-        if (varName.startsWith(varPrefix)) {
+        if (varName?.startsWith(varPrefix)) {
           // Get the actual CSS variable value from the computed styles of the document's root element
           const value = getComputedStyle(document.documentElement)
             .getPropertyValue(varName)

docs/utils/useJsonColor.ts

@@ -68,20 +68,23 @@ export const useJsonColor = (): CompiledColors => {
     }): CompiledColors => {
       const compiledColors: CompiledColors = {};
       Object.entries(themes).forEach(([themeName, theme]) => {
-        compiledColors[themeName] = {};
+        const tempThemeColors: Theme = {};
         Object.entries(theme).forEach(([colorName, colorValues]) => {
-          compiledColors[themeName][colorName] = {};
+          const tempThemeColorPalette: ColorPalette = {};
           Object.entries(colorValues).forEach(([shade, details]) => {
             const { value, description } = details;
             const resolvedValue = parseColorValue(value, figmaBrandColors);
-            compiledColors[themeName][colorName][shade] = {
+            const tempShadeColor = {
               ...details,
               value: resolvedValue,
               description:
                 description + (value === resolvedValue ? '' : ` ${value}`),
             };
+            tempThemeColorPalette[shade] = tempShadeColor;
           });
+          tempThemeColors[colorName] = tempThemeColorPalette;
         });
+        compiledColors[themeName] = tempThemeColors;
       });
       return compiledColors;
     };