chore: remove typography selection in app theming

app/client/packages/design-system/theming/src/hooks/src/index.ts

@@ -3,3 +3,5 @@ export * from "./useSpacing";
 export * from "./useTypography";
 export * from "./useTheme";
 export * from "./useCssTokens";
+export * from "./useIconDensity";
+export * from "./useIconSizing";

app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx

@@ -1,22 +1,21 @@
 import { css } from "@emotion/css";
-import { useEffect, useState } from "react";
-import { cssRule, getTypographyClassName } from "../../utils";
+import { useMemo } from "react";
+import { objectKeys } from "@appsmith/utils";
 
 import type { Theme } from "../../theme";
-import type { FontFamily, ThemeToken, Typography } from "../../token";
+import type { ThemeToken, Typography } from "../../token";
+import { cssRule, getTypographyClassName } from "../../utils";
 
-const fontFamilyCss = (fontFamily?: FontFamily) => {
+const fontFamilyCss = () => {
   const fontFamilyCss =
-    fontFamily && fontFamily !== "System Default"
-      ? `${fontFamily}, sans-serif`
-      : "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif";
+    "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Ubuntu', sans-serif";
 
   return `font-family: ${fontFamilyCss}; --font-family: ${fontFamilyCss}`;
 };
 
 const getTypographyCss = (typography: Typography) => {
   return css`
-    ${Object.keys(typography).reduce((prev, key) => {
+    ${objectKeys(typography).reduce((prev, key) => {
       const currentKey = key as keyof Typography;
       const { after, before, fontSize, lineHeight } = typography[currentKey];
       return (
@@ -55,47 +54,37 @@ const getColorCss = (color: ThemeToken["color"]) => {
 };
 
 export function useCssTokens(props: Theme) {
-  const { color, colorMode, fontFamily, typography, ...restTokens } = props;
-
-  const [colorClassName, setColorClassName] = useState<string>();
-  const [colorModeClassName, setColorModeClassName] = useState<string>();
-  const [fontFamilyClassName, setFontFamilyClassName] = useState<string>();
-  const [typographyClassName, setTypographyClassName] = useState<string>();
-  const [providerClassName, setProviderClassName] = useState<string>();
+  const { color, colorMode, typography, ...restTokens } = props;
 
-  useEffect(() => {
+  const colorClassName = useMemo(() => {
     if (color != null) {
-      setColorClassName(css`
+      return css`
         ${getColorCss(color)}
-      `);
+      `;
     }
   }, [color]);
 
-  useEffect(() => {
+  const typographyClassName = useMemo(() => {
     if (typography != null) {
-      setTypographyClassName(css`
+      return css`
         ${getTypographyCss(typography)}
-      `);
+      `;
     }
   }, [typography]);
 
-  useEffect(() => {
-    setFontFamilyClassName(css`
-      ${fontFamilyCss(fontFamily)}
-    `);
-  }, [fontFamily]);
+  const fontFamilyClassName = fontFamilyCss();
 
-  useEffect(() => {
-    setProviderClassName(css`
+  const providerClassName = useMemo(() => {
+    return css`
       ${cssRule(restTokens)};
-    `);
+    `;
   }, [restTokens]);
 
-  useEffect(() => {
+  const colorModeClassName = useMemo(() => {
     if (colorMode != null) {
-      setColorModeClassName(css`
+      return css`
         color-scheme: ${colorMode};
-      `);
+      `;
     }
   }, [colorMode]);
 

app/client/packages/design-system/theming/src/hooks/src/useIconDensity.tsx

@@ -1,23 +1,17 @@
-import { useEffect, useState } from "react";
-import type { IconDensity, TokenObj } from "../../token";
+import { useMemo } from "react";
+import type { IconDensity } from "../../token";
 
 export const useIconDensity = (density: IconDensity, userDensity = 1) => {
-  const [strokeWidth, setStrokeWidth] = useState<TokenObj>();
-
-  useEffect(() => {
+  const strokeWidth = useMemo(() => {
     switch (true) {
       case userDensity < 1:
-        setStrokeWidth(density.tight);
-        break;
+        return density.tight;
       case userDensity === 1:
-        setStrokeWidth(density.regular);
-        break;
+        return density.regular;
       case userDensity > 1:
-        setStrokeWidth(density.loose);
-        break;
+        return density.loose;
       default:
-        setStrokeWidth(density.regular);
-        break;
+        return density.regular;
     }
   }, [userDensity, density]);
 

app/client/packages/design-system/theming/src/hooks/src/useIconSizing.tsx

@@ -1,23 +1,17 @@
-import { useEffect, useState } from "react";
-import type { IconSizing, TokenObj } from "../../token";
+import { useMemo } from "react";
+import type { IconSizing } from "../../token";
 
 export const useIconSizing = (sizing: IconSizing, userSizing = 1) => {
-  const [iconSize, setIconSize] = useState<TokenObj>();
-
-  useEffect(() => {
+  const iconSize = useMemo(() => {
     switch (true) {
       case userSizing < 1:
-        setIconSize(sizing.small);
-        break;
+        return sizing.small;
       case userSizing === 1:
-        setIconSize(sizing.regular);
-        break;
+        return sizing.regular;
       case userSizing > 1:
-        setIconSize(sizing.big);
-        break;
+        return sizing.big;
       default:
-        setIconSize(sizing.regular);
-        break;
+        return sizing.regular;
     }
   }, [userSizing, sizing]);
 

app/client/packages/design-system/theming/src/hooks/src/useSizing.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useMemo } from "react";
 import { calculateScales } from "./calculateScales";
 
 import type { TokenObj, TokenScaleConfig } from "../../token";
@@ -8,7 +8,7 @@ export const getSizing = (
   userDensity = 1,
   userSizing = 1,
   count = 200,
-) => {
+): TokenObj => {
   const { userDensityRatio = 1, userSizingRatio = 1, V, ...rest } = sizing;
   const ratio = userDensity * userDensityRatio + userSizing * userSizingRatio;
 
@@ -35,11 +35,9 @@ export const useSizing = (
   userDensity = 1,
   userSizing = 1,
 ) => {
-  const [sizing, setSizing] = useState<TokenObj>();
-
-  useEffect(() => {
-    setSizing(getSizing(config, userDensity, userSizing));
-  }, [userDensity, userSizing, config]);
+  const sizing = useMemo(() => {
+    return getSizing(config, userDensity, userSizing);
+  }, [config, userDensity, userSizing]);
 
   return {
     sizing,

app/client/packages/design-system/theming/src/hooks/src/useSpacing.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from "react";
+import { useMemo } from "react";
 import { calculateScales } from "./calculateScales";
 
-import type { TokenObj, TokenScaleConfig } from "../../token";
+import type { TokenScaleConfig } from "../../token";
 
 export const getSpacing = (
   spacing: TokenScaleConfig,
@@ -36,16 +36,13 @@ export const useSpacing = (
   userDensity = 1,
   userSizing = 1,
 ) => {
-  const [outerSpacing, setOuterSpacing] = useState<TokenObj>();
-  const [innerSpacing, setInnerSpacing] = useState<TokenObj>();
+  const outerSpacing = useMemo(() => {
+    return getSpacing(outerSpacingConfig, userDensity, userSizing);
+  }, [outerSpacingConfig, userDensity, userSizing]);
 
-  useEffect(() => {
-    setOuterSpacing(getSpacing(outerSpacingConfig, userDensity, userSizing));
-  }, [userDensity, userSizing, outerSpacingConfig]);
-
-  useEffect(() => {
-    setInnerSpacing(getSpacing(innerSpacingConfig, userDensity, userSizing));
-  }, [userDensity, userSizing, innerSpacingConfig]);
+  const innerSpacing = useMemo(() => {
+    return getSpacing(innerSpacingConfig, userDensity, userSizing);
+  }, [innerSpacingConfig, userDensity, userSizing]);
 
   return {
     outerSpacing,