fix: prevent creating varianted tokens with more than 1 global variant

Change-Id: Ibf577f8c634461f133237b3f97e7284c4013a026
GitOrigin-RevId: e59579668fa79af5b68a4385ae11f4c9e5725a9b

platform/wab/src/wab/client/components/widgets/ColorPicker/ColorPicker.tsx

@@ -423,6 +423,9 @@ function ColorPicker_({
     }
   };
 
+  const isEditable =
+    appliedToken && isStyleTokenEditable(sc.site, appliedToken, vsh);
+
   return (
     <div>
       {!appliedToken && (
@@ -487,7 +490,7 @@ function ColorPicker_({
           {appliedToken && (
             <div className="flex flex-vcenter mb-sm">
               <MaybeWrap
-                cond={isStyleTokenEditable(sc.site, appliedToken)}
+                cond={isEditable}
                 wrapper={(x) => (
                   <Tooltip title="Edit color token">
                     {x as React.ReactElement}
@@ -496,7 +499,9 @@ function ColorPicker_({
               >
                 <Button
                   type="chip"
-                  onClick={() => setEditToken(appliedToken)}
+                  onClick={
+                    isEditable ? () => setEditToken(appliedToken) : undefined
+                  }
                   startIcon={
                     <ColorSwatch
                       color={realColor}
@@ -577,7 +582,7 @@ function ColorPicker_({
           />
         </div>
       )}
-      {editToken && isStyleTokenEditable(sc.site, editToken) && (
+      {editToken && (
         <ColorTokenPopup
           token={editToken}
           studioCtx={sc}

platform/wab/src/wab/client/components/widgets/DimTokenSelector.tsx

@@ -39,6 +39,7 @@ import {
   spawn,
   unexpected,
 } from "@/wab/shared/common";
+import { isStyleTokenEditable } from "@/wab/shared/core/sites";
 import * as css from "@/wab/shared/css";
 import {
   lengthCssUnits,
@@ -288,14 +289,17 @@ export const DimTokenSpinner = observer(
         return [];
       }
 
+      const selectedToken =
+        editableTokens.length > 0 ? editableTokens[0] : undefined;
+
       return filterFalsy([
         // Always show create token option
         { type: "add-token" } as const,
-        // Only show edit token option if a token is currently selected, and the user
-        // hasn't typed anything yet
-        inputValue.length === 0 &&
-          editableTokens.length > 0 &&
-          ({ type: "edit-token", token: editableTokens[0] } as const),
+        // Only show edit token option if , and
+        inputValue.length === 0 && // the user hasn't typed anything yet
+          selectedToken && // a token is currently selected
+          isStyleTokenEditable(studioCtx.site, selectedToken, vsh) && // the token is editable
+          ({ type: "edit-token", token: selectedToken } as const),
 
         // show tokens that match name or value
         ...naturalSort(

platform/wab/src/wab/shared/VariantedStylesHelper.ts

@@ -1,12 +1,14 @@
+import { TokenValue } from "@/wab/commons/StyleToken";
+import { DeepReadonly } from "@/wab/commons/types";
 import {
   arrayEqIgnoreOrder,
+  assert,
   ensure,
   ensureArray,
   last,
   remove,
 } from "@/wab/shared/common";
-import { TokenValue } from "@/wab/commons/StyleToken";
-import { DeepReadonly } from "@/wab/commons/types";
+import { cloneRuleSet } from "@/wab/shared/core/styles";
 import {
   isKnownStyleToken,
   Mixin,
@@ -22,7 +24,7 @@ import {
   isAncestorCombo,
   makeGlobalVariantComboSorter,
 } from "@/wab/shared/variant-sort";
-import { cloneRuleSet } from "@/wab/shared/core/styles";
+import { isValidComboForToken } from "@/wab/shared/Variants";
 
 export class VariantedStylesHelper {
   constructor(
@@ -123,21 +125,36 @@ export class VariantedStylesHelper {
       token.value) as TokenValue;
   }
 
-  updateToken(token: StyleToken, value: string) {
-    const variantedValue = token.variantedValues.find((v) =>
-      arrayEqIgnoreOrder(v.variants, ensureArray(this.targetGlobalVariants))
+  canUpdateToken(): boolean {
+    return (
+      this.isTargetBaseVariant() ||
+      (!!this.targetGlobalVariants &&
+        isValidComboForToken(this.targetGlobalVariants))
     );
+  }
+
+  updateToken(token: StyleToken, value: string) {
     if (this.isTargetBaseVariant()) {
       token.value = value;
-    } else if (variantedValue) {
+      return;
+    }
+
+    assert(
+      this.canUpdateToken(),
+      `cannot update token "${token.name}" with target global variants "${
+        this.targetGlobalVariants?.map((v) => v.name).join(",") ?? "base"
+      }"`
+    );
+
+    const variantedValue = token.variantedValues.find((v) =>
+      arrayEqIgnoreOrder(v.variants, this.targetGlobalVariants)
+    );
+    if (variantedValue) {
       variantedValue.value = value;
     } else {
       token.variantedValues.push(
         new VariantedValue({
-          variants: ensure(
-            this.targetGlobalVariants,
-            "target global variants must be specified"
-          ),
+          variants: this.targetGlobalVariants,
           value,
         })
       );

platform/wab/src/wab/shared/Variants.ts

@@ -702,6 +702,11 @@ export function ensureValidCombo(component: Component, combo: VariantCombo) {
   return combo;
 }
 
+export function isValidComboForToken(combo: VariantCombo) {
+  // The Studio UI and codegen only support varianted tokens with 1 variant.
+  return combo.length === 1;
+}
+
 /**
  * Return style variants whose selectors are all active
  */

platform/wab/src/wab/shared/codegen/react-p/index.ts

@@ -357,6 +357,7 @@ import {
   isScreenVariant,
   isStandaloneVariantGroup,
   isStyleVariant,
+  isValidComboForToken,
   VariantCombo,
   VariantGroupType,
 } from "@/wab/shared/Variants";
@@ -2473,7 +2474,7 @@ const makeCssClassExprsForVariantedTokens = (ctx: SerializerBaseContext) => {
         // the right css import
         const depMap = ctx.componentGenHelper.siteHelper.objToDepMap();
         assert(
-          vc.length === 1,
+          isValidComboForToken(vc),
           "Can only build varianted combos with one variant"
         );
         const variant = vc[0];

platform/wab/src/wab/shared/core/sites.ts

@@ -16,6 +16,7 @@ import {
 import { ARENA_CAP } from "@/wab/shared/Labels";
 import { getSlotArgs } from "@/wab/shared/SlotUtils";
 import { mkScreenVariantGroup } from "@/wab/shared/SpecialVariants";
+import { VariantedStylesHelper } from "@/wab/shared/VariantedStylesHelper";
 import {
   isGlobalVariant,
   isGlobalVariantGroup,
@@ -170,7 +171,6 @@ import {
   isKnownPageHref,
   isKnownRenderExpr,
   isKnownStrongFunctionArg,
-  isKnownStyleToken,
   isKnownTplComponent,
   isKnownTplNode,
   isKnownTplRef,
@@ -2007,24 +2007,26 @@ export function allImportedStyleTokensWithProjectInfo(site: Site) {
 // Only editable if owned in my site, not a dependency
 export function isEditable(
   site: Site,
-  asset: Component | StyleToken | Mixin | ImageAsset
+  asset: Component | Mixin | ImageAsset
 ): boolean {
   return (
     (isKnownComponent(asset) &&
       !isCodeComponent(asset) &&
       localComponents(site).includes(asset)) ||
-    (isKnownStyleToken(asset) && isStyleTokenEditable(site, asset)) ||
     (isKnownMixin(asset) && localMixins(site).includes(asset)) ||
     (isKnownImageAsset(asset) && localImageAssets(site).includes(asset))
   );
 }
 
 export function isStyleTokenEditable(
   site: Site,
-  styleToken: StyleToken
+  styleToken: StyleToken,
+  vsh: VariantedStylesHelper | undefined
 ): boolean {
   return (
-    !styleToken.isRegistered && localStyleTokens(site).includes(styleToken)
+    !styleToken.isRegistered &&
+    localStyleTokens(site).includes(styleToken) &&
+    (vsh === undefined || vsh.canUpdateToken())
   );
 }