From 6adeed096aa522cef5a6428f3303bca509a32771 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 4 Sep 2024 12:45:34 +0530 Subject: [PATCH 1/8] remove typography selection --- .../theming/src/hooks/src/index.ts | 2 + .../theming/src/hooks/src/useIconDensity.tsx | 29 ++- .../theming/src/hooks/src/useIconSizing.tsx | 29 ++- .../theming/src/hooks/src/useSizing.tsx | 12 +- .../theming/src/hooks/src/useSpacing.tsx | 19 +- .../theming/src/hooks/src/useTheme.tsx | 184 +++++------------- .../theming/src/hooks/src/useTypography.tsx | 11 +- app/client/src/pages/Editor/Canvas.tsx | 1 - .../Editor/WDSThemePropertyPane/index.tsx | 54 +---- 9 files changed, 95 insertions(+), 246 deletions(-) diff --git a/app/client/packages/design-system/theming/src/hooks/src/index.ts b/app/client/packages/design-system/theming/src/hooks/src/index.ts index f8d6541c98fa..7c0c56efa008 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/index.ts +++ b/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"; diff --git a/app/client/packages/design-system/theming/src/hooks/src/useIconDensity.tsx b/app/client/packages/design-system/theming/src/hooks/src/useIconDensity.tsx index 8d4b3dad0e1b..d54a99603eb6 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useIconDensity.tsx +++ b/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(); - - 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]); diff --git a/app/client/packages/design-system/theming/src/hooks/src/useIconSizing.tsx b/app/client/packages/design-system/theming/src/hooks/src/useIconSizing.tsx index 51ddc60c7a71..d7dbf39c2dd4 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useIconSizing.tsx +++ b/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(); - - 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]); diff --git a/app/client/packages/design-system/theming/src/hooks/src/useSizing.tsx b/app/client/packages/design-system/theming/src/hooks/src/useSizing.tsx index 047ed16f138a..14cde9b5f7ec 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useSizing.tsx +++ b/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(); - - useEffect(() => { - setSizing(getSizing(config, userDensity, userSizing)); - }, [userDensity, userSizing, config]); + const sizing = useMemo(() => { + return getSizing(config, userDensity, userSizing); + }, [config, userDensity, userSizing]); return { sizing, diff --git a/app/client/packages/design-system/theming/src/hooks/src/useSpacing.tsx b/app/client/packages/design-system/theming/src/hooks/src/useSpacing.tsx index 7cbc7bb65868..aeba5c8907b6 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useSpacing.tsx +++ b/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(); - const [innerSpacing, setInnerSpacing] = useState(); + 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, diff --git a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx index 908f268f56eb..2049cfd1c984 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx +++ b/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 }; } diff --git a/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx index 21cfaaa61258..d4ad6a4ed2a9 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useMemo } from "react"; import { FONT_METRICS, TYPOGRAPHY_VARIANTS } from "../../token"; import { calculateScales } from "./calculateScales"; import { createStyleObject } from "@capsizecss/core"; @@ -61,15 +61,12 @@ export const getTypography = ( export const useTypography = ( config: TokenScaleConfig, - fontFamily?: FontFamily, userDensity = 1, userSizing = 1, ) => { - const [typography, setTypography] = useState(null); - - useEffect(() => { - setTypography(getTypography(config, userDensity, userSizing, fontFamily)); - }, [userDensity, userSizing, fontFamily, config]); + const typography = useMemo(() => { + return getTypography(config, userDensity, userSizing); + }, [config, userDensity, userSizing]); return { typography, diff --git a/app/client/src/pages/Editor/Canvas.tsx b/app/client/src/pages/Editor/Canvas.tsx index d65b7920d463..8666858c4650 100644 --- a/app/client/src/pages/Editor/Canvas.tsx +++ b/app/client/src/pages/Editor/Canvas.tsx @@ -56,7 +56,6 @@ const Canvas = (props: CanvasProps) => { borderRadius: themeSetting.borderRadius, seedColor: themeSetting.accentColor, colorMode: themeSetting.colorMode.toLowerCase(), - fontFamily: themeSetting.fontFamily, userSizing: themeSetting.sizing, userDensity: themeSetting.density, iconStyle: themeSetting.iconStyle.toLowerCase(), diff --git a/app/client/src/pages/Editor/WDSThemePropertyPane/index.tsx b/app/client/src/pages/Editor/WDSThemePropertyPane/index.tsx index 5d64737db88a..729ea98b417d 100644 --- a/app/client/src/pages/Editor/WDSThemePropertyPane/index.tsx +++ b/app/client/src/pages/Editor/WDSThemePropertyPane/index.tsx @@ -1,7 +1,6 @@ import { debounce } from "lodash"; import styled from "styled-components"; import { isValidColor } from "utils/helpers"; -import { FONT_METRICS } from "@appsmith/wds-theming"; import { useDispatch, useSelector } from "react-redux"; import React, { useCallback, useRef, useState } from "react"; import type { ThemeSetting } from "constants/AppConstants"; @@ -13,7 +12,7 @@ import { LeftIcon, StyledInputGroup, } from "components/propertyControls/ColorPickerComponentV2"; -import { SegmentedControl, Tooltip, Select, Option, Icon } from "@appsmith/ads"; +import { SegmentedControl, Tooltip, Icon } from "@appsmith/ads"; import styles from "./styles.module.css"; @@ -35,14 +34,6 @@ const SubText = styled.p` color: var(--ads-v2-color-fg); `; -const FontText = styled.div` - border-radius: var(--ads-v2-border-radius); - border: 1px solid var(--ads-v2-color-border); - font-size: 11px; - height: 18px; - width: 18px; -`; - const buttonGroupOptions = THEME_SETTINGS_BORDER_RADIUS_OPTIONS.map( (optionKey) => ({ label: ( @@ -185,49 +176,6 @@ function WDSThemePropertyPane() { - -
- -
- - {/* Dimensions */} Date: Wed, 4 Sep 2024 13:03:32 +0530 Subject: [PATCH 2/8] revert to switch case --- .../theming/src/hooks/src/useIconDensity.tsx | 17 +++++++++-------- .../theming/src/hooks/src/useIconSizing.tsx | 17 +++++++++-------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/app/client/packages/design-system/theming/src/hooks/src/useIconDensity.tsx b/app/client/packages/design-system/theming/src/hooks/src/useIconDensity.tsx index d54a99603eb6..e8e170a1994c 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useIconDensity.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useIconDensity.tsx @@ -3,14 +3,15 @@ import type { IconDensity } from "../../token"; export const useIconDensity = (density: IconDensity, userDensity = 1) => { 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; + switch (true) { + case userDensity < 1: + return density.tight; + case userDensity === 1: + return density.regular; + case userDensity > 1: + return density.loose; + default: + return density.regular; } }, [userDensity, density]); diff --git a/app/client/packages/design-system/theming/src/hooks/src/useIconSizing.tsx b/app/client/packages/design-system/theming/src/hooks/src/useIconSizing.tsx index d7dbf39c2dd4..02c1da490056 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useIconSizing.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useIconSizing.tsx @@ -3,14 +3,15 @@ import type { IconSizing } from "../../token"; export const useIconSizing = (sizing: IconSizing, userSizing = 1) => { 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; + switch (true) { + case userSizing < 1: + return sizing.small; + case userSizing === 1: + return sizing.regular; + case userSizing > 1: + return sizing.big; + default: + return sizing.regular; } }, [userSizing, sizing]); From d190661e4584e489396e5623ead7c1870fae65ca Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 6 Sep 2024 12:04:00 +0530 Subject: [PATCH 3/8] fix border width bug --- .../packages/design-system/theming/src/hooks/src/useTheme.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx index 2049cfd1c984..766b01eddd1d 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx @@ -102,6 +102,7 @@ export function useTheme(props: UseThemeProps = {}) { } return { + ...tokensAccessor.getAllTokens(), ...tokensAccessor.getColors(), colorMode: tokensAccessor.getColorMode(), ...tokensAccessor.getBorderRadiusElevation(), From c3161834f95666cc969bfdb5bb337d95b1f9fe1b Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 6 Sep 2024 12:21:13 +0530 Subject: [PATCH 4/8] check if this changes fix storybook diff --- .../design-system/theming/src/hooks/src/useTheme.tsx | 1 + .../design-system/theming/src/hooks/src/useTypography.tsx | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx index 766b01eddd1d..a8485ee4fc7c 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx @@ -44,6 +44,7 @@ export function useTheme(props: UseThemeProps = {}) { ); const { typography } = useTypography( tokensConfigs.typography, + "System Default", userDensity, userSizing, ); diff --git a/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx index d4ad6a4ed2a9..89b0010cc4aa 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx @@ -61,12 +61,13 @@ export const getTypography = ( export const useTypography = ( config: TokenScaleConfig, + fontFamily?: FontFamily, userDensity = 1, userSizing = 1, ) => { const typography = useMemo(() => { - return getTypography(config, userDensity, userSizing); - }, [config, userDensity, userSizing]); + return getTypography(config, userDensity, userSizing, fontFamily); + }, [config, userDensity, userSizing, fontFamily]); return { typography, From a632db0932a12bab98c091f51592e042ca335b31 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 6 Sep 2024 13:16:46 +0530 Subject: [PATCH 5/8] remove font family from storybook as well --- .../addons/theming/ThemingPopup.tsx | 2 -- .../.storybook/decorators/theming.tsx | 1 - .../src/components/ThemeSettings.tsx | 33 ------------------- 3 files changed, 36 deletions(-) diff --git a/app/client/packages/storybook/.storybook/addons/theming/ThemingPopup.tsx b/app/client/packages/storybook/.storybook/addons/theming/ThemingPopup.tsx index 390763d83558..f7ebfb17dde9 100644 --- a/app/client/packages/storybook/.storybook/addons/theming/ThemingPopup.tsx +++ b/app/client/packages/storybook/.storybook/addons/theming/ThemingPopup.tsx @@ -61,8 +61,6 @@ export const ThemingPopup: React.FC = ({ leftShift, onClose }) => { setBorderRadius={(value) => updateGlobal("borderRadius", value)} seedColor={globals.seedColor} setSeedColor={(value) => updateGlobal("seedColor", value)} - fontFamily={globals.fontFamily} - setFontFamily={(value) => updateGlobal("fontFamily", value)} userDensity={globals.userDensity} userSizing={globals.userSizing} setUserDensity={(value) => updateGlobal("userDensity", value)} diff --git a/app/client/packages/storybook/.storybook/decorators/theming.tsx b/app/client/packages/storybook/.storybook/decorators/theming.tsx index 23b58e53a837..9efe5e3cd2ec 100644 --- a/app/client/packages/storybook/.storybook/decorators/theming.tsx +++ b/app/client/packages/storybook/.storybook/decorators/theming.tsx @@ -18,7 +18,6 @@ export const theming = (Story, args) => { seedColor: args.globals.seedColor, colorMode: args.parameters.colorMode || args.globals.colorMode, borderRadius: args.globals.borderRadius, - fontFamily: args.globals.fontFamily, userDensity: args.globals.userDensity, userSizing: args.globals.userSizing, }); diff --git a/app/client/packages/storybook/src/components/ThemeSettings.tsx b/app/client/packages/storybook/src/components/ThemeSettings.tsx index f9b227934de0..b3d77aa3b3db 100644 --- a/app/client/packages/storybook/src/components/ThemeSettings.tsx +++ b/app/client/packages/storybook/src/components/ThemeSettings.tsx @@ -2,7 +2,6 @@ import { Form } from "@storybook/components"; import React, { useCallback } from "react"; import { Flex, Text } from "@appsmith/wds"; import { ColorControl, BooleanControl, RangeControl } from "@storybook/blocks"; -import { FONT_METRICS } from "@appsmith/wds-theming"; import styled from "styled-components"; import { debounce } from "lodash"; import { AddonPanel } from "@storybook/components"; @@ -42,12 +41,10 @@ interface ThemeSettingsProps { export const ThemeSettings = ({ borderRadius, direction = "column", - fontFamily, isDarkMode, seedColor, setBorderRadius, setDarkMode, - setFontFamily, setSeedColor, setUserDensity, setUserSizing, @@ -106,36 +103,6 @@ export const ThemeSettings = ({ )} - {setFontFamily && ( - - Font Family - setFontFamily(e.target.value)} - size="100%" - title="Font Family" - > - - {Object.keys(FONT_METRICS) - .filter((item) => { - return ( - [ - "-apple-system", - "BlinkMacSystemFont", - "Segoe UI", - ].includes(item) === false - ); - }) - .map((font) => ( - - ))} - - - )} - {setUserDensity && ( Density From 48a7acc5d1c9b69839e8cec4bef53ec2d57afcb8 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Mon, 9 Sep 2024 16:53:20 +0530 Subject: [PATCH 6/8] remove code related to fontFamily and related tokens --- .../theming/src/hooks/src/useCssTokens.tsx | 53 ++++++++----------- .../theming/src/hooks/src/useTheme.tsx | 2 - .../theming/src/hooks/src/useTypography.tsx | 23 +++----- .../theming/src/theme/src/ThemeProvider.tsx | 2 +- .../theming/src/theme/src/types.ts | 11 ++-- .../theming/src/token/src/TokensAccessor.ts | 13 ----- .../theming/src/token/src/types.ts | 33 ------------ app/client/src/pages/AppViewer/index.tsx | 16 +++--- 8 files changed, 38 insertions(+), 115 deletions(-) diff --git a/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx b/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx index 56deb1ea41db..bc2e2f1508bc 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx +++ b/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(); - const [colorModeClassName, setColorModeClassName] = useState(); - const [fontFamilyClassName, setFontFamilyClassName] = useState(); - const [typographyClassName, setTypographyClassName] = useState(); - const [providerClassName, setProviderClassName] = useState(); + 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]); diff --git a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx index a8485ee4fc7c..27840f4cf483 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx @@ -44,7 +44,6 @@ export function useTheme(props: UseThemeProps = {}) { ); const { typography } = useTypography( tokensConfigs.typography, - "System Default", userDensity, userSizing, ); @@ -108,7 +107,6 @@ export function useTheme(props: UseThemeProps = {}) { colorMode: tokensAccessor.getColorMode(), ...tokensAccessor.getBorderRadiusElevation(), typography: tokensAccessor.getTypography(), - fontFamily: tokensAccessor.getFontFamily(), ...tokensAccessor.getSizing(), ...tokensAccessor.getOuterSpacing(), ...tokensAccessor.getInnerSpacing(), diff --git a/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx index 89b0010cc4aa..05380e99d634 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useTypography.tsx @@ -1,29 +1,20 @@ import { useMemo } from "react"; -import { FONT_METRICS, TYPOGRAPHY_VARIANTS } from "../../token"; import { calculateScales } from "./calculateScales"; import { createStyleObject } from "@capsizecss/core"; import appleSystem from "@capsizecss/metrics/appleSystem"; import type { - FontFamily, Typography, TypographyVariantMetric, TokenScaleConfig, } from "../../token"; - -const getFontMetrics = (fontFamily?: FontFamily) => { - return !Boolean(fontFamily) || - fontFamily == null || - fontFamily === "System Default" - ? appleSystem - : FONT_METRICS[fontFamily]; -}; +import { TYPOGRAPHY_VARIANTS } from "../../token/src/types"; +import { objectKeys } from "@appsmith/utils"; export const getTypography = ( typography: TokenScaleConfig, userDensity = 1, userSizing = 1, - fontFamily?: FontFamily, ) => { const { userDensityRatio = 1, userSizingRatio = 1, V, ...rest } = typography; const ratio = userDensity * userDensityRatio + userSizing * userSizingRatio; @@ -37,7 +28,7 @@ export const getTypography = ( const typographyStyle = createStyleObject({ capHeight: currentValue, lineGap: currentValue, - fontMetrics: getFontMetrics(fontFamily), + fontMetrics: appleSystem, }); metrics.push({ @@ -46,12 +37,13 @@ export const getTypography = ( before: typographyStyle["::before"], after: typographyStyle["::after"], }); + return metrics; }, [], ); - return Object.keys(TYPOGRAPHY_VARIANTS).reduce((prev, current, index) => { + return objectKeys(TYPOGRAPHY_VARIANTS).reduce((prev, current, index) => { return { ...prev, [current]: styles[index], @@ -61,13 +53,12 @@ export const getTypography = ( export const useTypography = ( config: TokenScaleConfig, - fontFamily?: FontFamily, userDensity = 1, userSizing = 1, ) => { const typography = useMemo(() => { - return getTypography(config, userDensity, userSizing, fontFamily); - }, [config, userDensity, userSizing, fontFamily]); + return getTypography(config, userDensity, userSizing); + }, [config, userDensity, userSizing]); return { typography, diff --git a/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx b/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx index 8dddca61b732..1cfb2f1bb634 100644 --- a/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx +++ b/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx @@ -20,7 +20,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => { fontFamilyClassName, providerClassName, typographyClassName, - } = useCssTokens({ ...theme }); + } = useCssTokens(theme); return ( diff --git a/app/client/packages/design-system/theming/src/theme/src/types.ts b/app/client/packages/design-system/theming/src/theme/src/types.ts index e7d56e2af57a..d4972b616737 100644 --- a/app/client/packages/design-system/theming/src/theme/src/types.ts +++ b/app/client/packages/design-system/theming/src/theme/src/types.ts @@ -1,16 +1,11 @@ -import type { CSSProperties } from "react"; import type { ReactNode } from "react"; +import type { CSSProperties } from "react"; + import type { ColorMode } from "../../color"; -import type { - FontFamily, - Typography, - ThemeToken, - IconStyle, -} from "../../token"; +import type { Typography, ThemeToken, IconStyle } from "../../token"; export type Theme = ThemeToken & { typography?: Typography; - fontFamily?: FontFamily; colorMode?: ColorMode; iconStyle?: IconStyle; }; diff --git a/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts b/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts index 5e2c14d3d726..da53c0a5b7cf 100644 --- a/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts +++ b/app/client/packages/design-system/theming/src/token/src/TokensAccessor.ts @@ -7,7 +7,6 @@ import type { TokenObj, TokenSource, TokenType, - FontFamily, Typography, IconStyle, } from "./types"; @@ -20,7 +19,6 @@ export class TokensAccessor { private borderWidth?: TokenObj; private opacity?: TokenObj; private typography?: Typography; - private fontFamily?: FontFamily; private outerSpacing?: TokenObj; private innerSpacing?: TokenObj; private sizing?: TokenObj; @@ -34,7 +32,6 @@ export class TokensAccessor { borderWidth, boxShadow, colorMode, - fontFamily, iconSize, iconStyle, innerSpacing, @@ -52,7 +49,6 @@ export class TokensAccessor { this.boxShadow = boxShadow; this.borderWidth = borderWidth; this.opacity = opacity; - this.fontFamily = fontFamily; this.sizing = sizing; this.outerSpacing = outerSpacing; this.innerSpacing = innerSpacing; @@ -63,10 +59,6 @@ export class TokensAccessor { this.iconSize = iconSize; } - updateFontFamily = (fontFamily?: FontFamily) => { - this.fontFamily = fontFamily; - }; - updateTypography = (typography: Typography) => { this.typography = typography; }; @@ -135,7 +127,6 @@ export class TokensAccessor { getAllTokens = () => { return { typography: this.getTypography(), - fontFamily: this.getFontFamily(), ...this.getOuterSpacing(), ...this.getInnerSpacing(), ...this.getSizing(), @@ -156,10 +147,6 @@ export class TokensAccessor { return this.typography; }; - getFontFamily = () => { - return this.fontFamily; - }; - getColors = () => { if (this.seedColor == null) return {} as ThemeToken; diff --git a/app/client/packages/design-system/theming/src/token/src/types.ts b/app/client/packages/design-system/theming/src/token/src/types.ts index e94859a4ab3c..262e54218cdb 100644 --- a/app/client/packages/design-system/theming/src/token/src/types.ts +++ b/app/client/packages/design-system/theming/src/token/src/types.ts @@ -1,17 +1,3 @@ -import arial from "@capsizecss/metrics/arial"; -import inter from "@capsizecss/metrics/inter"; -import rubik from "@capsizecss/metrics/rubik"; -import roboto from "@capsizecss/metrics/roboto"; -import ubuntu from "@capsizecss/metrics/ubuntu"; -import poppins from "@capsizecss/metrics/poppins"; -import segoeUI from "@capsizecss/metrics/segoeUI"; -import openSans from "@capsizecss/metrics/openSans"; -import notoSans from "@capsizecss/metrics/notoSans"; -import montserrat from "@capsizecss/metrics/montserrat"; -import nunitoSans from "@capsizecss/metrics/nunitoSans12pt"; -import appleSystem from "@capsizecss/metrics/appleSystem"; -import BlinkMacSystemFont from "@capsizecss/metrics/blinkMacSystemFont"; - import type { ColorMode, ColorTypes } from "../../color"; export type ThemeToken = { @@ -44,7 +30,6 @@ export interface TokenSource { boxShadow?: TokenObj; borderWidth?: TokenObj; opacity?: TokenObj; - fontFamily?: FontFamily; zIndex?: TokenObj; sizing?: TokenObj; outerSpacing?: TokenObj; @@ -80,22 +65,6 @@ export interface TokenScaleConfig { userDensityRatio?: number; } -export const FONT_METRICS = { - Poppins: poppins, - Inter: inter, - Roboto: roboto, - Rubik: rubik, - Ubuntu: ubuntu, - "Noto Sans": notoSans, - "Open Sans": openSans, - Montserrat: montserrat, - "Nunito Sans": nunitoSans, - Arial: arial, - "-apple-system": appleSystem, - BlinkMacSystemFont: BlinkMacSystemFont, - "Segoe UI": segoeUI, -} as const; - // we use "as const" here because we need to iterate by variants export const TYPOGRAPHY_VARIANTS = { footnote: "footnote", @@ -118,8 +87,6 @@ export const TYPOGRAPHY_FONT_WEIGHTS = { 900: 900, } as const; -export type FontFamily = keyof typeof FONT_METRICS | "System Default"; - export interface TypographyVariantMetric { fontSize: string; lineHeight: string; diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx index 5fab3e349ef5..33e35336a054 100644 --- a/app/client/src/pages/AppViewer/index.tsx +++ b/app/client/src/pages/AppViewer/index.tsx @@ -43,10 +43,11 @@ import { } from "ee/selectors/applicationSelectors"; import { editorInitializer } from "../../utils/editor/EditorUtils"; import { widgetInitialisationSuccess } from "../../actions/widgetActions"; -import type { FontFamily } from "@appsmith/wds-theming"; import { ThemeProvider as WDSThemeProvider, useTheme, + type ColorMode, + type IconStyle, } from "@appsmith/wds-theming"; import { KBViewerFloatingButton } from "ee/pages/AppViewer/KnowledgeBase/KBViewerFloatingButton"; import urlBuilder from "ee/entities/URLRedirect/URLAssembly"; @@ -107,21 +108,16 @@ function AppViewer(props: Props) { ); const isAnvilLayout = useSelector(getIsAnvilLayout); const themeSetting = useSelector(getAppThemeSettings); - const themeProps = { - borderRadius: selectedTheme.properties.borderRadius.appBorderRadius, - seedColor: selectedTheme.properties.colors.primaryColor, - fontFamily: selectedTheme.properties.fontFamily.appFont as FontFamily, - }; const wdsThemeProps = { borderRadius: themeSetting.borderRadius, seedColor: themeSetting.accentColor, - colorMode: themeSetting.colorMode.toLowerCase(), - fontFamily: themeSetting.fontFamily as FontFamily, + colorMode: themeSetting.colorMode.toLowerCase() as ColorMode, userSizing: themeSetting.sizing, userDensity: themeSetting.density, - iconStyle: themeSetting.iconStyle.toLowerCase(), + iconStyle: themeSetting.iconStyle.toLowerCase() as IconStyle, }; - const { theme } = useTheme(isAnvilLayout ? wdsThemeProps : themeProps); + const { theme } = useTheme(isAnvilLayout ? wdsThemeProps : {}); + const focusRef = useWidgetFocus(); const isAutoLayout = useSelector(getIsAutoLayout); From 80b57fd1caf1e0da5c95038e0333e8947ebb0cf0 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Mon, 9 Sep 2024 17:20:01 +0530 Subject: [PATCH 7/8] fix typo --- .../design-system/theming/src/hooks/src/useCssTokens.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx b/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx index bc2e2f1508bc..b5e30df72fe3 100644 --- a/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx +++ b/app/client/packages/design-system/theming/src/hooks/src/useCssTokens.tsx @@ -72,7 +72,9 @@ export function useCssTokens(props: Theme) { } }, [typography]); - const fontFamilyClassName = fontFamilyCss(); + const fontFamilyClassName = css` + ${fontFamilyCss()} + `; const providerClassName = useMemo(() => { return css` From a0d12586c130252d4164305c5293c1b6fb67b5eb Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 10 Sep 2024 10:25:57 +0530 Subject: [PATCH 8/8] remove font change test --- .../AppTheming/AnvilAppThemingSnapshot_spec.ts | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts index 7000e5d226dc..df1b1b0575d8 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Anvil/AppTheming/AnvilAppThemingSnapshot_spec.ts @@ -36,17 +36,7 @@ describe( anvilSnapshot.setAccentColor("#0080ff"); }); - it("3. Typography", () => { - anvilSnapshot.setTypography("Inter"); - - anvilSnapshot.matchSnapshotForCanvasMode("AppThemingTypography"); - anvilSnapshot.matchSnapshotForPreviewMode("AppThemingTypography"); - anvilSnapshot.matchSnapshotForDeployMode("AppThemingTypography"); - - anvilSnapshot.setTypography("System Default"); - }); - - it("4. Density", () => { + it("3. Density", () => { ["Tight", "Regular", "Loose"].forEach((density) => { anvilSnapshot.setDensity(density); @@ -58,7 +48,7 @@ describe( }); }); - it("5. Sizing", () => { + it("4. Sizing", () => { ["Small", "Regular", "Big"].forEach((size) => { anvilSnapshot.setSizing(size); @@ -68,7 +58,7 @@ describe( }); }); - it("6. Corners", () => { + it("5. Corners", () => { ["0px", "6px", "20px"].forEach((corner) => { anvilSnapshot.setCorners(corner); @@ -78,7 +68,7 @@ describe( }); }); - it("7. Icon Style", () => { + it("6. Icon Style", () => { ["Filled", "Outlined"].forEach((iconStyle) => { anvilSnapshot.setIconStyle(iconStyle);