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/useIconDensity.tsx

@@ -1,23 +1,16 @@
-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(() => {
-    switch (true) {
-      case userDensity < 1:
-        setStrokeWidth(density.tight);
-        break;
-      case userDensity === 1:
-        setStrokeWidth(density.regular);
-        break;
-      case userDensity > 1:
-        setStrokeWidth(density.loose);
-        break;
-      default:
-        setStrokeWidth(density.regular);
-        break;
+  const strokeWidth = useMemo(() => {
+    if (userDensity < 1) {
+      return density.tight;
+    } else if (userDensity === 1) {
+      return density.regular;
+    } else if (userDensity > 1) {
+      return density.loose;
+    } else {
+      return density.regular;
     }
   }, [userDensity, density]);
 

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

@@ -1,23 +1,16 @@
-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(() => {
-    switch (true) {
-      case userSizing < 1:
-        setIconSize(sizing.small);
-        break;
-      case userSizing === 1:
-        setIconSize(sizing.regular);
-        break;
-      case userSizing > 1:
-        setIconSize(sizing.big);
-        break;
-      default:
-        setIconSize(sizing.regular);
-        break;
+  const iconSize = useMemo(() => {
+    if (userSizing < 1) {
+      return sizing.small;
+    } else if (userSizing === 1) {
+      return sizing.regular;
+    } else if (userSizing > 1) {
+      return sizing.big;
+    } else {
+      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,

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

@@ -1,12 +1,16 @@
 import Color from "colorjs.io";
-import { useEffect, useState } from "react";
+import { useMemo } from "react";
 import { TokensAccessor, defaultTokens, tokensConfigs } from "../../token";
-import { useSizing, useSpacing, useTypography } from "./";
+import {
+  useSizing,
+  useSpacing,
+  useTypography,
+  useIconSizing,
+  useIconDensity,
+} from "./";
 
 import type { ColorMode } from "../../color";
-import type { TokenSource, FontFamily, IconStyle } from "../../token";
-import { useIconDensity } from "./useIconDensity";
-import { useIconSizing } from "./useIconSizing";
+import type { TokenSource, IconStyle } from "../../token";
 
 const tokensAccessor = new TokensAccessor({
   ...(defaultTokens as TokenSource),
@@ -16,7 +20,6 @@ export interface UseThemeProps {
   seedColor?: string;
   colorMode?: ColorMode;
   borderRadius?: string;
-  fontFamily?: FontFamily;
   userDensity?: number;
   userSizing?: number;
   iconStyle?: IconStyle;
@@ -26,7 +29,6 @@ export function useTheme(props: UseThemeProps = {}) {
   const {
     borderRadius,
     colorMode = "light",
-    fontFamily,
     iconStyle = "outlined",
     seedColor,
     userDensity = 1,
@@ -42,168 +44,88 @@ export function useTheme(props: UseThemeProps = {}) {
   );
   const { typography } = useTypography(
     tokensConfigs.typography,
-    fontFamily,
     userDensity,
     userSizing,
   );
-
   const { iconSize } = useIconSizing(tokensConfigs.icon.sizing, userSizing);
-
   const { strokeWidth } = useIconDensity(
     tokensConfigs.icon.density,
     userDensity,
   );
 
-  const [theme, setTheme] = useState(tokensAccessor.getAllTokens);
-
-  useEffect(() => {
-    if (colorMode) {
-      tokensAccessor.updateColorMode(colorMode);
+  const theme = useMemo(() => {
+    // Color mode
+    tokensAccessor.updateColorMode(colorMode);
 
-      setTheme((prevState) => {
-        return {
-          ...prevState,
-          ...tokensAccessor.getColors(),
-          colorMode: tokensAccessor.getColorMode(),
-        };
-      });
-    }
-  }, [colorMode]);
-
-  useEffect(() => {
+    // Border radius
     if (borderRadius != null) {
       tokensAccessor.updateBorderRadiusElevation({
         ...defaultTokens.borderRadiusElevation,
         base: borderRadius,
       });
-
-      setTheme((prevState) => {
-        return {
-          ...prevState,
-          ...tokensAccessor.getBorderRadiusElevation(),
-        };
-      });
     }
-  }, [borderRadius]);
 
-  useEffect(() => {
+    // Seed color
     if (seedColor != null) {
-      let color;
-
       try {
-        color = Color.parse(seedColor);
+        Color.parse(seedColor);
+        tokensAccessor.updateSeedColor(seedColor);
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error(error);
-        return; // Prevent further execution if color parsing fails
-      }
-
-      if (color != null) {
-        tokensAccessor.updateSeedColor(seedColor);
-
-        setTheme((prevState) => {
-          return {
-            ...prevState,
-            ...tokensAccessor.getColors(),
-          };
-        });
       }
     }
-  }, [seedColor]);
 
-  useEffect(() => {
-    // Check typography, as fontFamily may be undefined
+    // Typography
     if (typography != null) {
-      tokensAccessor.updateFontFamily(fontFamily);
       tokensAccessor.updateTypography(typography);
-
-      setTheme((prevState) => {
-        return {
-          ...prevState,
-          typography: tokensAccessor.getTypography(),
-          fontFamily: tokensAccessor.getFontFamily(),
-        };
-      });
     }
-  }, [typography, fontFamily]);
 
-  useEffect(() => {
-    if (sizing) {
-      tokensAccessor.updateSizing(sizing);
+    // Sizing
+    tokensAccessor.updateSizing(sizing);
 
-      setTheme((prevState) => {
-        return {
-          ...prevState,
-          ...tokensAccessor.getSizing(),
-        };
-      });
-    }
-  }, [sizing]);
+    // Spacing
+    tokensAccessor.updateOuterSpacing(outerSpacing);
+    tokensAccessor.updateInnerSpacing(innerSpacing);
 
-  useEffect(() => {
-    if (outerSpacing) {
-      tokensAccessor.updateOuterSpacing(outerSpacing);
+    // Icon style
+    tokensAccessor.updateIconStyle(iconStyle);
 
-      setTheme((prevState) => {
-        return {
-          ...prevState,
-          ...tokensAccessor.getOuterSpacing(),
-        };
-      });
-    }
-  }, [outerSpacing]);
-
-  useEffect(() => {
-    if (innerSpacing) {
-      tokensAccessor.updateInnerSpacing(innerSpacing);
-
-      setTheme((prevState) => {
-        return {
-          ...prevState,
-          ...tokensAccessor.getInnerSpacing(),
-        };
-      });
-    }
-  }, [innerSpacing]);
-
-  useEffect(() => {
-    if (iconStyle) {
-      tokensAccessor.updateIconStyle(iconStyle);
-
-      setTheme((prevState) => {
-        return {
-          ...prevState,
-          iconStyle: tokensAccessor.getIconStyle(),
-        };
-      });
-    }
-  }, [iconStyle]);
-
-  useEffect(() => {
+    // Icon size
     if (iconSize != null) {
       tokensAccessor.updateIconSize(iconSize);
-
-      setTheme((prevState) => {
-        return {
-          ...prevState,
-          ...tokensAccessor.getIconSize(),
-        };
-      });
     }
-  }, [iconSize]);
 
-  useEffect(() => {
+    // Stroke width
     if (strokeWidth != null) {
       tokensAccessor.updateStrokeWidth(strokeWidth);
-
-      setTheme((prevState) => {
-        return {
-          ...prevState,
-          ...tokensAccessor.getStrokeWidth(),
-        };
-      });
     }
-  }, [strokeWidth]);
 
-  return { theme, setTheme };
+    return {
+      ...tokensAccessor.getColors(),
+      colorMode: tokensAccessor.getColorMode(),
+      ...tokensAccessor.getBorderRadiusElevation(),
+      typography: tokensAccessor.getTypography(),
+      fontFamily: tokensAccessor.getFontFamily(),
+      ...tokensAccessor.getSizing(),
+      ...tokensAccessor.getOuterSpacing(),
+      ...tokensAccessor.getInnerSpacing(),
+      iconStyle: tokensAccessor.getIconStyle(),
+      ...tokensAccessor.getIconSize(),
+      ...tokensAccessor.getStrokeWidth(),
+    };
+  }, [
+    colorMode,
+    borderRadius,
+    seedColor,
+    typography,
+    sizing,
+    outerSpacing,
+    innerSpacing,
+    iconStyle,
+    iconSize,
+    strokeWidth,
+  ]);
+
+  return { theme };
 }