Merge branch 'main' into six7/add-filter-to-search-global

.changeset/perfect-fishes-smoke.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+fix(tokenState): setTokensFromVariables description comparison

.changeset/twenty-days-relate.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Fixed an issue where referencing a gradient would result in an empty color style; now the style correctly resolves to the gradient.

.changeset/weak-oranges-buy.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+fixes a bug where applying a typography token to a text node would override individual property changes (like font size or font family) when "Apply to selection/page/document" is clicked.

.github/workflows/node.js.yml

@@ -96,35 +96,6 @@ jobs:
           afterSwitchCommand: yarn
           useSameComment: true
           delta: 1
-  test-transform:
-    name: Transformer Tests
-    runs-on: ubuntu-22.04
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Node.js environment
-        uses: actions/setup-node@v3
-        with:
-          node-version: "18.x"
-          cache: yarn
-          cache-dependency-path: "**/yarn.lock"
-      - name: Install dependencies
-        run: yarn  --frozen-lockfile  --immutable
-
-      # 4: Build package
-      - name: build:transform
-        working-directory: packages/tokens-studio-for-figma
-        run: npm run build-transform
-
-      # 5: Install dependencies
-      - name: Install dependencies - transformer
-        working-directory: packages/tokens-studio-for-figma/token-transformer
-        run: npm ci
-
-      # 6: Run tests
-      - name: Run test command
-        working-directory: packages/tokens-studio-for-figma/token-transformer
-        run: npm run test
   cypress-run:
     name: Cypress
     runs-on: ubuntu-22.04

packages/tokens-studio-for-figma/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @tokens-studio/figma-plugin
 
+## 2.1.1
+
+### Patch Changes
+
+- f6398c7a: Fixed an issue introduced in 2.1.0 that sometimes caused the order of token sets to not be as expected, meaning sets that acted as overrides didn't correctly get calculated.
+- fe94d6a3: Resolved an issue with Bitbucket sync where deleted sets were still being reflected in the tokens repository.
+- bf8c185a: Fixed a bug where applying themes using "Prefix styles with active theme name" didn't correctly apply the right styles.
+- cddfb5ba: Fixed an issue with "zombie variables". Basically, even though a Figma file shows 0 variables, Figma's plugin API will sometimes tell us there's variables existing - probably ones that existed in the past but should be deleted - Figma seems to report those as existing still. This led to issues around applying and referencing variables where we'd point to those zombies. We now correctly check if the variable's collection still exist, and only then use those as references.
+
+## 2.1.0
+
+### Minor Changes
+
+- 0bc599e0: Changed logic around how we create styles or variables around Theming, as well as the logic around token sets and themes. 2.0 introduced some changes that made the whole process more strict. This change now changes things the other way around, we're less strict. Basically, if you export themes and you are exporting multiple themes at once, we now look at the overall configuration of token sets and pass these on as tokens to use for resolution. Meaning, you should not run into issues where you have broken references anymore just because a token set was disabled. If a set contains a token - even if the set is disabled - we will use it to resolve references.
+- e1838a32: Fixes issue where styles are not applied in Figma, when user exports Token Sets as Styles
+
+### Patch Changes
+
+- 417df53c: Raise limit for tokens in Tokens Studio sync to 3000 tokens per set
+- 087b4c1e: Fixed an issue around variable creation where if numerical weights were used we'd display an error that we're unable to apply the font. We now changed this to properly load all weights of the font family and then create styles correctly with variable references to the numerical weight variable
+- 2c60963c: Changed logic when "Remove styles and variables without connection to a token" is enabled where we now look at all created tokens in this session and remove them, instead of looking at each theme individually
+- a81b9a9f: Add missing padding to list of token sets in Export Token Sets Tab
+- fd68d5a5: Prevents falsy errors from displaying when pushing to GitLab and ADO
+- 087b4c1e: Fixes variable creation of color token was using a modifier and using a reference. We now correctly create a raw hex value as Figma doesn't have modifiers. Before we falsely used a reference without the modifier applied
+- 8f97ea63: Optimized the speed of importing variables. Importing should now feel drastically faster
+
 ## 2.0.3
 
 ### Patch Changes

packages/tokens-studio-for-figma/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokens-studio/figma-plugin",
-  "version": "2.0.3",
+  "version": "2.1.1",
   "description": "Tokens Studio plugin for Figma",
   "license": "MIT",
   "private": true,

packages/tokens-studio-for-figma/src/app/components/ConvertToDTCGModal.tsx

@@ -60,7 +60,7 @@ export function ConvertToDTCGModal() {
           <Button variant="primary" onClick={handleConvert} disabled={hasRemoteChanges}>
             {isDTCG ? t('converttolegacy') : t('converttow3c')}
           </Button>
-          <Link href="https://docs.tokens.studio/convert-to-dtcg-format" target="_blank">{t('readmoreformat')}</Link>
+          <Link href="https://docs.tokens.studio/token-format/token-format-view-change-dtcg" target="_blank">{t('readmoreformat')}</Link>
         </Stack>
         {hasRemoteChanges && <ErrorMessage>{t('pushfirsterror')}</ErrorMessage>}
       </Stack>

packages/tokens-studio-for-figma/src/app/components/ImportedTokensDialog.test.tsx

@@ -376,7 +376,7 @@ describe('ImportedTokensDialog', () => {
             },
           },
           {
-            $extensions: { 'studio.tokens': {} },
+            $extensions: { 'studio.tokens': { id: 'mock-uuid' } },
             name: 'opacity.50',
             type: 'opacity',
             value: '30%',
@@ -401,7 +401,7 @@ describe('ImportedTokensDialog', () => {
       expect(mockStore.getState().tokenState.tokens.global).toEqual(
         [
           {
-            $extensions: { 'studio.tokens': {} },
+            $extensions: { 'studio.tokens': { id: 'mock-uuid' } },
             name: 'light',
             type: 'typography',
             value: {
@@ -411,7 +411,7 @@ describe('ImportedTokensDialog', () => {
             },
           },
           {
-            $extensions: { 'studio.tokens': {} },
+            $extensions: { 'studio.tokens': { id: 'mock-uuid' } },
             name: 'opacity.50',
             type: 'opacity',
             value: '30%',

packages/tokens-studio-for-figma/src/app/components/ImportedTokensDialog.tsx

@@ -14,6 +14,7 @@ import { ImportToken } from '@/types/tokens';
 import Text from './Text';
 import Accordion from './Accordion';
 import { Count } from './Count';
+import { track } from '@/utils/analytics';
 
 function NewOrExistingToken({
   token,
@@ -164,6 +165,27 @@ export default function ImportedTokensDialog() {
     // Update all existing tokens, and create new ones
     importMultipleTokens({ multipleUpdatedTokens, multipleNewTokens });
 
+    const combinedTokens = [...multipleUpdatedTokens, ...multipleNewTokens];
+
+    const uniqueCollectionCount = combinedTokens.reduce((acc, token) => {
+      if (token.parent && !acc.includes(token.parent)) {
+        acc.push(token.parent);
+      }
+      return acc;
+    }, [] as string[]).length;
+
+    track('Import variables', {
+      totalCount: multipleUpdatedTokens.length + multipleNewTokens.length,
+      updatedCount: multipleUpdatedTokens.length,
+      newCount: multipleNewTokens.length,
+      colorTokens: combinedTokens.filter((token) => token.type === 'color').length,
+      textTokens: combinedTokens.filter((token) => token.type === 'text').length,
+      numberTokens: combinedTokens.filter((token) => token.type === 'number').length,
+      booleanTokens: combinedTokens.filter((token) => token.type === 'boolean').length,
+      dimensionTokens: combinedTokens.filter((token) => token.type === 'dimension').length,
+      collectionCount: uniqueCollectionCount,
+    });
+
     setUpdatedTokens([]);
     setNewTokens([]);
   }, [activeTokenSet, importMultipleTokens, newTokens, updatedTokens]);
@@ -178,6 +200,7 @@ export default function ImportedTokensDialog() {
       description: token.description,
       shouldUpdateDocument: false,
     });
+    track('Import single variable', { type: token.type });
     setNewTokens(newTokens.filter((newToken) => newToken.name !== token.name));
   }, [newTokens, activeTokenSet, createSingleToken]);
 
@@ -191,6 +214,8 @@ export default function ImportedTokensDialog() {
       description: token.description,
       shouldUpdateDocument: false,
     });
+    track('Update single variable', { type: token.type });
+
     setUpdatedTokens(updatedTokens.filter((updatedToken) => updatedToken.name !== token.name));
   }, [updatedTokens, editSingleToken, activeTokenSet]);
 
@@ -204,11 +229,11 @@ export default function ImportedTokensDialog() {
     setUpdatedTokens(importedTokens.updatedTokens);
   }, [importedTokens.newTokens, importedTokens.updatedTokens]);
 
-  const ListLength = 15;
+  const ListLength = 50;
 
   return (
     <Modal
-      title={t('imported', { ns: 'tokens' })}
+      title={t('importVariables', { ns: 'tokens' })}
       size="large"
       showClose
       isOpen={newTokens.length > 0 || updatedTokens.length > 0}

packages/tokens-studio-for-figma/src/app/components/Initiator.tsx

@@ -105,7 +105,6 @@ export function Initiator() {
           case MessageFromPluginTypes.VARIABLES: {
             const { values } = pluginMessage;
             if (values) {
-              track('Import variables');
               dispatch.tokenState.setTokensFromVariables(values);
               dispatch.uiState.setActiveTab(Tabs.TOKENS);
             }

packages/tokens-studio-for-figma/src/app/components/RemConfiguration.tsx

@@ -34,10 +34,7 @@ const RemConfiguration = () => {
 
   const resolvedTokens = React.useMemo(
     () => defaultTokenResolver.setTokens(
-      mergeTokenGroups(tokens, {
-        ...usedTokenSet,
-        [activeTokenSet]: TokenSetStatus.ENABLED,
-      }),
+      mergeTokenGroups(tokens, usedTokenSet, {}, activeTokenSet),
     ),
     [tokens, usedTokenSet, activeTokenSet],
   );

packages/tokens-studio-for-figma/src/app/components/Tokens.tsx

@@ -114,10 +114,7 @@ function Tokens({ isActive }: { isActive: boolean }) {
   }, [activeTokenSet]);
 
   const resolvedTokens = React.useMemo(
-    () => defaultTokenResolver.setTokens(mergeTokenGroups(tokens, {
-      ...usedTokenSet,
-      [activeTokenSet]: TokenSetStatus.ENABLED,
-    })),
+    () => defaultTokenResolver.setTokens(mergeTokenGroups(tokens, usedTokenSet, {}, activeTokenSet)),
     [tokens, usedTokenSet, activeTokenSet],
   );
 

packages/tokens-studio-for-figma/src/app/store/models/tokenState.tsx

@@ -51,6 +51,7 @@ import {
 } from '@/storage/tokensStudio';
 import { deleteTokenSetFromTokensStudio } from '@/storage/tokensStudio/deleteTokenSetFromTokensStudio';
 import { updateAliasesInState } from '../utils/updateAliasesInState';
+import { CreateSingleTokenData, EditSingleTokenData } from '../useManageTokens';
 
 export interface TokenState {
   tokens: Record<string, AnyTokenList>;
@@ -246,6 +247,45 @@ export const tokenState = createModel<RootModel>()({
         },
       };
     },
+    createMultipleTokens: (state, data: CreateSingleTokenData[]) => {
+      // This is a deep clone of the tokens so that we force an update in the UI even if just the value changes
+      const newTokens: TokenStore['values'] = JSON.parse(JSON.stringify(state.tokens));
+      data.forEach((token) => {
+        if (!newTokens[token.parent]) {
+          newTokens[token.parent] = [];
+        }
+        const existingTokenIndex = newTokens[token.parent].findIndex((n) => n.name === token.name);
+        if (existingTokenIndex === -1) {
+          newTokens[token.parent].push(
+            updateTokenPayloadToSingleToken(token as UpdateTokenPayload, uuidv4()),
+          );
+        }
+      });
+
+      return {
+        ...state,
+        tokens: newTokens,
+      };
+    },
+    editMultipleTokens: (state, data: EditSingleTokenData[]) => {
+      // This is a deep clone of the tokens so that we force an update in the UI even if just the value changes
+      const newTokens: TokenStore['values'] = JSON.parse(JSON.stringify(state.tokens));
+      data.forEach((token) => {
+        const existingTokenIndex = newTokens[token.parent].findIndex((n) => n.name === token.name);
+        if (existingTokenIndex > -1) {
+          newTokens[token.parent] = [
+            ...newTokens[token.parent].slice(0, existingTokenIndex),
+            updateTokenPayloadToSingleToken(token as UpdateTokenPayload, uuidv4()),
+            ...newTokens[token.parent].slice(existingTokenIndex + 1),
+          ];
+        }
+      });
+
+      return {
+        ...state,
+        tokens: newTokens,
+      };
+    },
     duplicateToken: (state, data: DuplicateTokenPayload) => {
       const newTokens: TokenStore['values'] = {};
       Object.keys(state.tokens).forEach((tokenSet) => {
@@ -298,17 +338,17 @@ export const tokenState = createModel<RootModel>()({
       const newTokens: StyleToCreateToken[] = [];
       const existingTokens: StyleToCreateToken[] = [];
       const updatedTokens: StyleToCreateToken[] = [];
+
       // Iterate over received styles and check if they existed before or need updating
       Object.values(receivedStyles).forEach((values) => {
         values.forEach((token) => {
           const oldValue = state.tokens[state.activeTokenSet].find((t) => t.name === token.name);
 
           if (oldValue) {
             if (isEqual(oldValue.value, token.value)) {
-              if (
-                oldValue.description === token.description
-                || (typeof token.description === 'undefined' && oldValue.description === '')
-              ) {
+              const normalizedOldValueDescription = oldValue.description ?? '';
+              const normalizedTokenDescription = token.description ?? '';
+              if (isEqual(normalizedOldValueDescription, normalizedTokenDescription)) {
                 existingTokens.push(token);
               } else {
                 updatedTokens.push({
@@ -349,7 +389,9 @@ export const tokenState = createModel<RootModel>()({
             const oldValue = state.tokens[token.parent].find((t) => t.name === token.name);
             // If the token already exists
             if (oldValue) {
-              if (isEqual(oldValue.value, token.value) && isEqual(oldValue.description, token.description)) {
+              const normalizedOldValueDescription = oldValue.description ?? '';
+              const normalizedTokenDescription = token.description ?? '';
+              if (isEqual(oldValue.value, token.value) && isEqual(normalizedOldValueDescription, normalizedTokenDescription)) {
                 existingTokens.push(token);
               } else {
                 const updatedToken = { ...token };