From 1325d8fa833ab9303bbfaafc2f3be6fd89bc1a27 Mon Sep 17 00:00:00 2001
From: Hiroshi <hinatatadashi0823@gmail.com>
Date: Sun, 19 Mar 2023 18:45:05 +0900
Subject: [PATCH] 1671 base font size token doesnt pick up tokens (#1672)

https://user-images.githubusercontent.com/25951419/223715617-4b34653c-3dd1-4e94-aaae-cc92fb0fcedd.mp4
---
 src/app/components/Tokens.tsx     | 9 ++++++++-
 src/app/store/models/settings.tsx | 3 ++-
 src/plugin/node.ts                | 5 ++---
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/app/components/Tokens.tsx b/src/app/components/Tokens.tsx
index 51db97e5c..4af8ba0d7 100644
--- a/src/app/components/Tokens.tsx
+++ b/src/app/components/Tokens.tsx
@@ -22,7 +22,7 @@ import parseJson from '@/utils/parseJson';
 import AttentionIcon from '@/icons/attention.svg';
 import { TokensContext } from '@/context';
 import {
-  activeTokenSetSelector, manageThemesModalOpenSelector, scrollPositionSetSelector, showEditFormSelector, tokenFilterSelector, tokensSelector, tokenTypeSelector, usedTokenSetSelector,
+  activeTokenSetSelector, aliasBaseFontSizeSelector, manageThemesModalOpenSelector, scrollPositionSetSelector, showEditFormSelector, tokenFilterSelector, tokensSelector, tokenTypeSelector, usedTokenSetSelector,
 } from '@/selectors';
 import { ThemeSelector } from './ThemeSelector';
 import IconToggleableDisclosure from '@/app/components/IconToggleableDisclosure';
@@ -31,6 +31,7 @@ import { ManageThemesModal } from './ManageThemesModal';
 import { TokenSetStatus } from '@/constants/TokenSetStatus';
 import { activeTokensTabSelector } from '@/selectors/activeTokensTabSelector';
 import { stringTokensSelector } from '@/selectors/stringTokensSelector';
+import { getAliasValue } from '@/utils/alias';
 
 const StyledButton = styled('button', {
   '&:focus, &:hover': {
@@ -98,6 +99,7 @@ function Tokens({ isActive }: { isActive: boolean }) {
   const manageThemesModalOpen = useSelector(manageThemesModalOpenSelector);
   const scrollPositionSet = useSelector(scrollPositionSetSelector);
   const tokenFilter = useSelector(tokenFilterSelector);
+  const aliasBaseFontSize = useSelector(aliasBaseFontSizeSelector);
   const dispatch = useDispatch<Dispatch>();
   const [tokenSetsVisible, setTokenSetsVisible] = React.useState(true);
   const { getStringTokens } = useTokens();
@@ -191,6 +193,11 @@ function Tokens({ isActive }: { isActive: boolean }) {
     }
   }, [dispatch, tokens, stringTokens, activeTokenSet]);
 
+  React.useEffect(() => {
+    const newBaseFontSize = getAliasValue(aliasBaseFontSize, resolvedTokens);
+    dispatch.settings.setBaseFontSize(String(newBaseFontSize));
+  }, [resolvedTokens, aliasBaseFontSize]);
+
   const saveScrollPositionSet = React.useCallback((tokenSet: string) => {
     if (tokenDiv.current) {
       dispatch.uiState.setScrollPositionSet({ ...scrollPositionSet, [tokenSet]: tokenDiv.current?.scrollTop });
diff --git a/src/app/store/models/settings.tsx b/src/app/store/models/settings.tsx
index 299b1f92a..db4030b69 100644
--- a/src/app/store/models/settings.tsx
+++ b/src/app/store/models/settings.tsx
@@ -155,7 +155,7 @@ export const settings = createModel<RootModel>()({
       };
     },
   },
-  effects: () => ({
+  effects: (dispatch) => ({
     setWindowSize: (payload) => {
       AsyncMessageChannel.ReactInstance.message({
         type: AsyncMessageTypes.RESIZE_WINDOW,
@@ -196,6 +196,7 @@ export const settings = createModel<RootModel>()({
     },
     setBaseFontSize: (payload, rootState) => {
       setUI(rootState.settings);
+      dispatch.tokenState.updateDocument({ shouldUpdateNodes: false });
     },
     setAliasBaseFontSize: (payload, rootState) => {
       setUI(rootState.settings);
diff --git a/src/plugin/node.ts b/src/plugin/node.ts
index 327b41ae6..c61596b0a 100644
--- a/src/plugin/node.ts
+++ b/src/plugin/node.ts
@@ -5,7 +5,6 @@ import setValuesOnNode from './setValuesOnNode';
 import { Properties } from '@/constants/Properties';
 import { NodeTokenRefMap } from '@/types/NodeTokenRefMap';
 import { defaultNodeManager, NodeManagerNode } from './NodeManager';
-import { UpdateNodesSettings } from '@/types/UpdateNodesSettings';
 import { postToUI } from './notifiers';
 import { MessageFromPluginTypes } from '@/types/messages';
 import { BackgroundJobs } from '@/constants/BackgroundJobs';
@@ -26,6 +25,7 @@ import { AsyncMessageChannel } from '@/AsyncMessageChannel';
 import { AsyncMessageTypes } from '@/types/AsyncMessages';
 import { updatePluginData } from './pluginData';
 import { extractColorInBorderTokenForAlias } from './extractColorInBorderTokenForAlias';
+import { SettingsState } from '@/app/store/models/settings';
 
 // @TODO fix typings
 
@@ -221,14 +221,13 @@ async function migrateTokens(entry: NodeManagerNode, values: MapValuesToTokensRe
 export async function updateNodes(
   entries: readonly NodeManagerNode[],
   tokens: Map<string, AnyTokenList[number]>,
-  settings?: UpdateNodesSettings,
+  settings?: SettingsState,
 ) {
   const { ignoreFirstPartForStyles, prefixStylesWithThemeName, baseFontSize } = settings ?? {};
   const figmaStyleMaps = getAllFigmaStyleMaps();
   const themeInfo = await AsyncMessageChannel.PluginInstance.message({
     type: AsyncMessageTypes.GET_THEME_INFO,
   });
-
   postToUI({
     type: MessageFromPluginTypes.START_JOB,
     job: {