Merge branch 'main' into akshay/update-free-trial-link

Author: akshay-gupta7

.changeset/four-ducks-do.md

@@ -0,0 +1,9 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Variable scoping enhancements - 
+
+- Add support for hiddenFromPublishing
+- Add support for selecting no scopes in a token
+- Fix font weight token scoping bug when weight is set to a string

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

@@ -352,6 +352,7 @@ function EditTokenForm({ resolvedTokens }: Props) {
     const newExtensions = { ...internalEditToken.$extensions };
     delete newExtensions['com.figma.scopes'];
     delete newExtensions['com.figma.codeSyntax'];
+    delete newExtensions['com.figma.hiddenFromPublishing'];
     // Keep variableId and isOverride if they exist
     setInternalEditToken({
       ...internalEditToken,
@@ -360,7 +361,7 @@ function EditTokenForm({ resolvedTokens }: Props) {
   }, [internalEditToken]);
 
   const handleFigmaVariableChange = React.useCallback(
-    (scopes: string[], codeSyntax: Partial<Record<string, string>>) => {
+    (scopes: string[], codeSyntax: Partial<Record<string, string>>, hiddenFromPublishing?: boolean) => {
       const newExtensions = { ...internalEditToken.$extensions };
 
       // Set or remove scopes in flat format
@@ -377,6 +378,12 @@ function EditTokenForm({ resolvedTokens }: Props) {
         delete newExtensions['com.figma.codeSyntax'];
       }
 
+      if (typeof hiddenFromPublishing === 'boolean') {
+        newExtensions['com.figma.hiddenFromPublishing'] = hiddenFromPublishing;
+      } else {
+        delete newExtensions['com.figma.hiddenFromPublishing'];
+      }
+
       setInternalEditToken({
         ...internalEditToken,
         $extensions: newExtensions as SingleToken['$extensions'],

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

@@ -1,7 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   IconButton, Heading, Checkbox, Text, Stack, Label,
 } from '@tokens-studio/ui';
+import Tooltip from './Tooltip';
 import IconPlus from '@/icons/plus.svg';
 import IconMinus from '@/icons/minus.svg';
 import { EditTokenObject } from '@/types/tokens';
@@ -13,22 +15,26 @@ import { VariableScope, CodeSyntaxPlatform } from '@/types/tokens';
 import {
   VARIABLE_SCOPE_OPTIONS, TOKEN_TYPE_TO_SCOPES_MAP, CODE_SYNTAX_PLATFORM_OPTIONS,
 } from '@/constants/FigmaVariableMetaData';
+import { track } from '@/utils/analytics';
 
 export default function FigmaVariableForm({
   internalEditToken,
   handleFigmaVariableChange,
   handleRemoveFigmaVariable,
 }: {
   internalEditToken: EditTokenObject;
-  handleFigmaVariableChange: (scopes: VariableScope[], codeSyntax: Partial<Record<CodeSyntaxPlatform, string>>) => void;
+  handleFigmaVariableChange: (scopes: VariableScope[], codeSyntax: Partial<Record<CodeSyntaxPlatform, string>>, hiddenFromPublishing?: boolean) => void;
   handleRemoveFigmaVariable: () => void;
 }) {
+  const { t } = useTranslation(['tokens']);
   const [figmaVariableVisible, setFigmaVariableVisible] = React.useState(false);
 
   const currentScopes = useMemo(() => internalEditToken?.$extensions?.['com.figma.scopes'] as VariableScope[] || [], [internalEditToken]);
 
   const currentCodeSyntax = useMemo(() => internalEditToken?.$extensions?.['com.figma.codeSyntax'] as Partial<Record<CodeSyntaxPlatform, string>> || {}, [internalEditToken]);
 
+  const currentHiddenFromPublishing = useMemo(() => internalEditToken?.$extensions?.['com.figma.hiddenFromPublishing'] as boolean | undefined, [internalEditToken]);
+
   const shouldShowFigmaVariableSection = useMemo(() => tokenTypesToCreateVariable.includes(internalEditToken.type), [internalEditToken.type]);
 
   // Filter variable scope options based on token type
@@ -38,14 +44,14 @@ export default function FigmaVariableForm({
   }, [internalEditToken.type]);
 
   React.useEffect(() => {
-    if (internalEditToken?.$extensions?.['com.figma.scopes'] || internalEditToken?.$extensions?.['com.figma.codeSyntax']) {
+    if (internalEditToken?.$extensions?.['com.figma.scopes'] || internalEditToken?.$extensions?.['com.figma.codeSyntax'] || typeof internalEditToken?.$extensions?.['com.figma.hiddenFromPublishing'] === 'boolean') {
       setFigmaVariableVisible(true);
     }
   }, [internalEditToken]);
 
   const addFigmaVariable = useCallback(() => {
     setFigmaVariableVisible(true);
-    handleFigmaVariableChange([], {});
+    handleFigmaVariableChange([], {}, undefined);
   }, [handleFigmaVariableChange]);
 
   const removeFigmaVariable = useCallback(() => {
@@ -55,21 +61,25 @@ export default function FigmaVariableForm({
 
   const handleScopeChange = useCallback((scope: VariableScope, checked: boolean) => {
     let newScopes: VariableScope[];
+    track('Select variable scope', { scope, checked });
 
     if (scope === 'ALL_SCOPES') {
       // If selecting ALL_SCOPES, clear all other scopes
-      // If deselecting ALL_SCOPES, keep other scopes as they are
-      newScopes = checked ? ['ALL_SCOPES'] : currentScopes.filter((s) => s !== 'ALL_SCOPES');
+      newScopes = checked ? ['ALL_SCOPES'] : [];
+    } else if (scope === 'NONE') {
+      // If selecting NONE, clear all other scopes
+      newScopes = checked ? ['NONE'] : [];
     } else if (checked) {
-      // If selecting any other scope, add it and remove ALL_SCOPES
-      newScopes = [...currentScopes.filter((s) => s !== 'ALL_SCOPES'), scope];
+      // If selecting any other scope, add it and remove ALL_SCOPES and NONE
+      newScopes = [...currentScopes.filter((s) => s !== 'ALL_SCOPES' && s !== 'NONE'), scope];
     } else {
       // If deselecting, just remove the specific scope
       newScopes = currentScopes.filter((s) => s !== scope);
     }
 
-    handleFigmaVariableChange(newScopes, currentCodeSyntax);
-  }, [currentScopes, currentCodeSyntax, handleFigmaVariableChange]);
+    handleFigmaVariableChange(newScopes, currentCodeSyntax, currentHiddenFromPublishing);
+  }, [currentScopes, currentCodeSyntax, currentHiddenFromPublishing, handleFigmaVariableChange]);
+
 
   const handleCodeSyntaxPlatformChange = useCallback((platform: CodeSyntaxPlatform, checked: boolean) => {
     const newCodeSyntax = { ...currentCodeSyntax };
@@ -78,14 +88,14 @@ export default function FigmaVariableForm({
     } else {
       delete newCodeSyntax[platform];
     }
-    handleFigmaVariableChange(currentScopes, newCodeSyntax);
-  }, [currentScopes, currentCodeSyntax, handleFigmaVariableChange]);
+    handleFigmaVariableChange(currentScopes, newCodeSyntax, currentHiddenFromPublishing);
+  }, [currentScopes, currentCodeSyntax, currentHiddenFromPublishing, handleFigmaVariableChange]);
 
   const handleCodeSyntaxValueChange = useCallback((platform: CodeSyntaxPlatform, value: string) => {
     const newCodeSyntax = { ...currentCodeSyntax };
     newCodeSyntax[platform] = value;
-    handleFigmaVariableChange(currentScopes, newCodeSyntax);
-  }, [currentScopes, currentCodeSyntax, handleFigmaVariableChange]);
+    handleFigmaVariableChange(currentScopes, newCodeSyntax, currentHiddenFromPublishing);
+  }, [currentScopes, currentCodeSyntax, currentHiddenFromPublishing, handleFigmaVariableChange]);
 
   const handleScopeCheckedChange = useCallback((scope: VariableScope) => (checked: boolean | string) => {
     handleScopeChange(scope, !!checked);
@@ -99,6 +109,29 @@ export default function FigmaVariableForm({
     handleCodeSyntaxValueChange(platform, e.target.value);
   }, [handleCodeSyntaxValueChange]);
 
+  // Three-state cycle: indeterminate (undefined) → true → false → indeterminate (undefined)
+  const handleHiddenFromPublishingCheckedChange = useCallback(() => {
+    let nextValue: boolean | undefined;
+    if (currentHiddenFromPublishing === undefined) {
+      nextValue = true;
+    } else if (currentHiddenFromPublishing === true) {
+      nextValue = false;
+    } else {
+      nextValue = undefined; // back to indeterminate — removes the extension key
+    }
+    track('Set hidden from publishing', { checked: nextValue });
+    handleFigmaVariableChange(currentScopes, currentCodeSyntax, nextValue);
+  }, [currentHiddenFromPublishing, currentScopes, currentCodeSyntax, handleFigmaVariableChange]);
+
+  let hiddenFromPublishingTooltip: string;
+  if (currentHiddenFromPublishing === true) {
+    hiddenFromPublishingTooltip = t('figmaVariable.hiddenFromPublishing.tooltipOn');
+  } else if (currentHiddenFromPublishing === false) {
+    hiddenFromPublishingTooltip = t('figmaVariable.hiddenFromPublishing.tooltipOff');
+  } else {
+    hiddenFromPublishingTooltip = t('figmaVariable.hiddenFromPublishing.tooltipNotSet');
+  }
+
   if (!shouldShowFigmaVariableSection) {
     return null;
   }
@@ -163,6 +196,29 @@ export default function FigmaVariableForm({
               </Box>
             )}
 
+            <Box>
+              <Text muted size="small" css={{ marginBottom: '$2' }}>
+                Variable settings
+              </Text>
+              <Box css={{ display: 'inline-flex', alignItems: 'center', gap: '$2' }}>
+                <Tooltip
+                  label={hiddenFromPublishingTooltip}
+                  side="top"
+                >
+                  <span>
+                    <Checkbox
+                      id="hiddenFromPublishing"
+                      checked={currentHiddenFromPublishing === undefined ? 'indeterminate' : currentHiddenFromPublishing}
+                      onCheckedChange={handleHiddenFromPublishingCheckedChange}
+                    />
+                  </span>
+                </Tooltip>
+                <Label css={{ fontWeight: '$sansRegular', fontSize: '$small' }} htmlFor="hiddenFromPublishing">
+                  {t('figmaVariable.hiddenFromPublishing.label')}
+                </Label>
+              </Box>
+            </Box>
+
             <Box>
               <Text muted size="small" css={{ marginBottom: '$2' }}>
                 Code syntax

packages/tokens-studio-for-figma/src/constants/FigmaVariableMetaData.ts

@@ -2,6 +2,7 @@ import { TokenTypes } from './TokenTypes';
 import { VariableScope, CodeSyntaxPlatform } from '@/types/tokens';
 
 export const VARIABLE_SCOPE_OPTIONS: { value: VariableScope; label: string }[] = [
+    { value: 'NONE', label: 'None' },
     { value: 'ALL_SCOPES', label: 'Show in all supported properties' },
     { value: 'TEXT_CONTENT', label: 'Text content' },
     { value: 'CORNER_RADIUS', label: 'Corner radius' },
@@ -28,53 +29,53 @@ export const VARIABLE_SCOPE_OPTIONS: { value: VariableScope; label: string }[] =
 
 export const TOKEN_TYPE_TO_SCOPES_MAP: Record<string, VariableScope[]> = {
     [TokenTypes.COLOR]: [
-        'ALL_SCOPES', 'ALL_FILLS', 'FRAME_FILL', 'SHAPE_FILL', 'TEXT_FILL', 'STROKE_COLOR', 'EFFECT_COLOR',
+        'NONE', 'ALL_SCOPES', 'ALL_FILLS', 'FRAME_FILL', 'SHAPE_FILL', 'TEXT_FILL', 'STROKE_COLOR', 'EFFECT_COLOR',
     ],
     [TokenTypes.BORDER_RADIUS]: [
-        'ALL_SCOPES', 'CORNER_RADIUS',
+        'NONE', 'ALL_SCOPES', 'CORNER_RADIUS',
     ],
     [TokenTypes.SIZING]: [
-        'ALL_SCOPES', 'WIDTH_HEIGHT', 'GAP',
+        'NONE', 'ALL_SCOPES', 'WIDTH_HEIGHT', 'GAP',
     ],
     [TokenTypes.SPACING]: [
-        'ALL_SCOPES', 'WIDTH_HEIGHT', 'GAP',
+        'NONE', 'ALL_SCOPES', 'WIDTH_HEIGHT', 'GAP',
     ],
     [TokenTypes.DIMENSION]: [
-        'ALL_SCOPES', 'WIDTH_HEIGHT', 'GAP', 'CORNER_RADIUS',
+        'NONE', 'ALL_SCOPES', 'WIDTH_HEIGHT', 'GAP', 'CORNER_RADIUS',
     ],
     [TokenTypes.BORDER_WIDTH]: [
-        'ALL_SCOPES', 'STROKE_FLOAT',
+        'NONE', 'ALL_SCOPES', 'STROKE_FLOAT',
     ],
     [TokenTypes.OPACITY]: [
-        'ALL_SCOPES', 'OPACITY',
+        'NONE', 'ALL_SCOPES', 'OPACITY',
     ],
     [TokenTypes.FONT_FAMILIES]: [
-        'ALL_SCOPES', 'FONT_FAMILY',
+        'NONE', 'ALL_SCOPES', 'FONT_FAMILY',
     ],
     [TokenTypes.FONT_WEIGHTS]: [
-        'ALL_SCOPES', 'FONT_WEIGHT',
+        'NONE', 'ALL_SCOPES', 'FONT_WEIGHT',
     ],
     [TokenTypes.FONT_SIZES]: [
-        'ALL_SCOPES', 'FONT_SIZE',
+        'NONE', 'ALL_SCOPES', 'FONT_SIZE',
     ],
     [TokenTypes.LINE_HEIGHTS]: [
-        'ALL_SCOPES', 'LINE_HEIGHT',
+        'NONE', 'ALL_SCOPES', 'LINE_HEIGHT',
     ],
     [TokenTypes.LETTER_SPACING]: [
-        'ALL_SCOPES', 'LETTER_SPACING',
+        'NONE', 'ALL_SCOPES', 'LETTER_SPACING',
     ],
     [TokenTypes.PARAGRAPH_SPACING]: [
-        'ALL_SCOPES', 'PARAGRAPH_SPACING',
+        'NONE', 'ALL_SCOPES', 'PARAGRAPH_SPACING',
     ],
     [TokenTypes.PARAGRAPH_INDENT]: [
-        'ALL_SCOPES', 'PARAGRAPH_INDENT',
+        'NONE', 'ALL_SCOPES', 'PARAGRAPH_INDENT',
     ],
     [TokenTypes.TEXT]: [
-        'ALL_SCOPES', 'TEXT_CONTENT', 'FONT_FAMILY', 'FONT_STYLE',
+        'NONE', 'ALL_SCOPES', 'TEXT_CONTENT', 'FONT_FAMILY', 'FONT_STYLE', 'FONT_WEIGHT',
     ],
-    [TokenTypes.BOOLEAN]: [],
+    [TokenTypes.BOOLEAN]: ['NONE'],
     [TokenTypes.NUMBER]: [
-        'ALL_SCOPES', 'TEXT_CONTENT', 'WIDTH_HEIGHT', 'GAP', 'CORNER_RADIUS', 'STROKE_FLOAT', 'EFFECT_FLOAT', 'OPACITY', 'FONT_WEIGHT', 'FONT_SIZE', 'LINE_HEIGHT', 'LETTER_SPACING', 'PARAGRAPH_SPACING', 'PARAGRAPH_INDENT',
+        'NONE', 'ALL_SCOPES', 'TEXT_CONTENT', 'WIDTH_HEIGHT', 'GAP', 'CORNER_RADIUS', 'STROKE_FLOAT', 'EFFECT_FLOAT', 'OPACITY', 'FONT_WEIGHT', 'FONT_SIZE', 'LINE_HEIGHT', 'LETTER_SPACING', 'PARAGRAPH_SPACING', 'PARAGRAPH_INDENT',
     ],
 };
 

packages/tokens-studio-for-figma/src/i18n/lang/en/tokens.json

@@ -246,5 +246,13 @@
   "generateDocumentationDescription": "Generate documentation is a Pro feature that creates visual token documentation layers directly on your Figma canvas from your design tokens.",
   "all": "All",
   "applyTokensToCreatedLayers": "Apply active theme values",
-  "clearSearch": "Clear search"
-}
+  "clearSearch": "Clear search",
+  "figmaVariable": {
+    "hiddenFromPublishing": {
+      "label": "Hidden from publishing",
+      "tooltipOn": "Will be hidden in published libraries",
+      "tooltipOff": "Will be visible in published libraries",
+      "tooltipNotSet": "Current Figma setting will be preserved"
+    }
+  }
+}

packages/tokens-studio-for-figma/src/i18n/lang/es/tokens.json

@@ -255,5 +255,13 @@
   "generateDocumentationDescription": "Generar documentación es una función Pro que crea capas de documentación visual de tokens directamente en su lienzo de Figma a partir de sus tokens de diseño.",
   "all": "Todos",
   "applyTokensToCreatedLayers": "Aplicar valores del tema activo",
-  "clearSearch": "Limpiar búsqueda"
-}
+  "clearSearch": "Limpiar búsqueda",
+  "figmaVariable": {
+    "hiddenFromPublishing": {
+      "label": "Oculto de la publicación",
+      "tooltipOn": "Se ocultará en las bibliotecas publicadas",
+      "tooltipOff": "Será visible en las bibliotecas publicadas",
+      "tooltipNotSet": "Se conservará la configuración actual de Figma"
+    }
+  }
+}

packages/tokens-studio-for-figma/src/i18n/lang/fr/tokens.json

@@ -255,5 +255,13 @@
   "generateDocumentationDescription": "Générer la documentation est une fonctionnalité Pro qui crée des couches de documentation visuelle des jetons directement sur votre canevas Figma à partir de vos jetons de conception.",
   "all": "Tous",
   "applyTokensToCreatedLayers": "Appliquer les valeurs du thème actif",
-  "clearSearch": "Effacer la recherche"
-}
+  "clearSearch": "Effacer la recherche",
+  "figmaVariable": {
+    "hiddenFromPublishing": {
+      "label": "Masqué de la publication",
+      "tooltipOn": "Sera masqué dans les bibliothèques publiées",
+      "tooltipOff": "Sera visible dans les bibliothèques publiées",
+      "tooltipNotSet": "Le paramètre Figma actuel sera conservé"
+    }
+  }
+}

packages/tokens-studio-for-figma/src/i18n/lang/hi/tokens.json

@@ -255,5 +255,13 @@
   "generateDocumentationDescription": "दस्तावेज़ीकरण उत्पन्न करना एक प्रो सुविधा है जो आपके डिज़ाइन टोकन से सीधे आपके Figma कैनवास पर दृश्य टोकन दस्तावेज़ीकरण परतें बनाती है।",
   "all": "सभी",
   "applyTokensToCreatedLayers": "सक्रिय थीम मान लागू करें",
-  "clearSearch": "खोज साफ़ करें"
-}
+  "clearSearch": "खोज साफ़ करें",
+  "figmaVariable": {
+    "hiddenFromPublishing": {
+      "label": "प्रकाशन से छिपाएं",
+      "tooltipOn": "प्रकाशित लाइब्रेरी में छिपा होगा",
+      "tooltipOff": "प्रकाशित लाइब्रेरी में दिखाई देगा",
+      "tooltipNotSet": "Figma की वर्तमान सेटिंग बनाए रखी जाएगी"
+    }
+  }
+}

packages/tokens-studio-for-figma/src/i18n/lang/nl/tokens.json

@@ -255,5 +255,13 @@
   "generateDocumentationDescription": "Documentatie genereren is een Pro-functie die visuele token documentatie lagen direct op uw Figma canvas creëert vanuit uw ontwerp tokens.",
   "all": "Alle",
   "applyTokensToCreatedLayers": "Pas actieve thema waarden toe",
-  "clearSearch": "Zoekopdracht wissen"
-}
+  "clearSearch": "Zoekopdracht wissen",
+  "figmaVariable": {
+    "hiddenFromPublishing": {
+      "label": "Verborgen voor publicatie",
+      "tooltipOn": "Wordt verborgen in gepubliceerde bibliotheken",
+      "tooltipOff": "Wordt zichtbaar in gepubliceerde bibliotheken",
+      "tooltipNotSet": "De huidige Figma-instelling wordt behouden"
+    }
+  }
+}

packages/tokens-studio-for-figma/src/i18n/lang/zh/tokens.json

@@ -259,5 +259,13 @@
   "generateDocumentationDescription": "生成文档是一项专业版功能，可以直接在您的 Figma 画布上从设计令牌创建可视化令牌文档图层。",
   "all": "全部",
   "applyTokensToCreatedLayers": "应用当前主题值",
-  "clearSearch": "清除搜索"
-}
+  "clearSearch": "清除搜索",
+  "figmaVariable": {
+    "hiddenFromPublishing": {
+      "label": "从发布中隐藏",
+      "tooltipOn": "将在已发布的库中隐藏",
+      "tooltipOff": "将在已发布的库中可见",
+      "tooltipNotSet": "将保留当前的 Figma 设置"
+    }
+  }
+}