chore: fix transparent color issues

svc-instui · adamlobler · commit 99155c4f8289 · 2025-12-12T14:39:03.000+01:00
diff --git a/packages/ui-scripts/lib/build/tokensStudio/$themes.json b/packages/ui-scripts/lib/build/tokensStudio/$themes.json
@@ -497,6 +497,7 @@
       "dropShadow.spread.elevation3.dropshadow2": "5f9c5a28e234bfb54036ab50ba47e602afa03a05",
       "dropShadow.spread.elevation4.dropshadow1": "15a0438ea73a6d9d2206964ba1f42589256d6862",
       "dropShadow.spread.elevation4.dropshadow2": "a1dd57f2393c7cb342de0545404fce8594d467b0",
+      "color.transparentColor": "7d5f74a62e72084734333813ec14cac39b500f32",
       "listItem.color": "5ff01d33a8ef4cf00cb9e52672ebfd1a97f94ba1",
       "listItem.fontFamily": "e1c28609bf244775ea1e12f2b06270114ab0f610",
       "listItem.fontSizeLarge": "97cf220cce3c955223756c78bc586fa9fd83e64f",
@@ -2078,6 +2079,7 @@
       "dropShadow.spread.elevation3.dropshadow2": "5f9c5a28e234bfb54036ab50ba47e602afa03a05",
       "dropShadow.spread.elevation4.dropshadow1": "15a0438ea73a6d9d2206964ba1f42589256d6862",
       "dropShadow.spread.elevation4.dropshadow2": "a1dd57f2393c7cb342de0545404fce8594d467b0",
+      "color.transparentColor": "7d5f74a62e72084734333813ec14cac39b500f32",
       "listItem.color": "5ff01d33a8ef4cf00cb9e52672ebfd1a97f94ba1",
       "listItem.fontFamily": "e1c28609bf244775ea1e12f2b06270114ab0f610",
       "listItem.fontSizeLarge": "97cf220cce3c955223756c78bc586fa9fd83e64f",
@@ -3809,6 +3811,7 @@
       "dropShadow.spread.elevation3.dropshadow2": "5f9c5a28e234bfb54036ab50ba47e602afa03a05",
       "dropShadow.spread.elevation4.dropshadow1": "15a0438ea73a6d9d2206964ba1f42589256d6862",
       "dropShadow.spread.elevation4.dropshadow2": "a1dd57f2393c7cb342de0545404fce8594d467b0",
+      "color.transparentColor": "7d5f74a62e72084734333813ec14cac39b500f32",
       "avatar.backgroundColor": "e1481f812d6ac0dc0620c4764ebcf323b29d38ad",
       "avatar.borderColor": "226288e9db85cf3d16bf4368b07c70aa5a18d7a3",
       "avatar.borderWidthSm": "5309df0b1654d29e763049782ece62088d064771",
@@ -5388,6 +5391,7 @@
       "dropShadow.spread.elevation3.dropshadow2": "5f9c5a28e234bfb54036ab50ba47e602afa03a05",
       "dropShadow.spread.elevation4.dropshadow1": "15a0438ea73a6d9d2206964ba1f42589256d6862",
       "dropShadow.spread.elevation4.dropshadow2": "a1dd57f2393c7cb342de0545404fce8594d467b0",
+      "color.transparentColor": "7d5f74a62e72084734333813ec14cac39b500f32",
       "avatar.backgroundColor": "e1481f812d6ac0dc0620c4764ebcf323b29d38ad",
       "avatar.borderColor": "226288e9db85cf3d16bf4368b07c70aa5a18d7a3",
       "avatar.borderWidthSm": "5309df0b1654d29e763049782ece62088d064771",
@@ -6461,6 +6465,7 @@
     "$figmaModeId": "10778:0",
     "$figmaVariableReferences": {
       "color.white": "bf07b04465b67153ee069a58a6a7acd14eb835bd",
+      "color.transparent": "82f2e8dbcdd9386170aacd2290b377bb302df5d3",
       "color.green.green10": "c387e04c7ea3b9d7af17eeb422ab7a275e1e5969",
       "color.green.green20": "70743de1e3ab8bff2f39cd1649eac3709112e869",
       "color.green.green30": "b548e0d59a62c8df341d919c1f0ae3ed35ac59eb",
diff --git a/packages/ui-scripts/lib/build/tokensStudio/canvas/component/ContextView.json b/packages/ui-scripts/lib/build/tokensStudio/canvas/component/ContextView.json
@@ -21,7 +21,7 @@
       "type": "color"
     },
     "arrowBorderColorInverse": {
-      "value": "#00000000",
+      "value": "{color.transparentColor}",
       "type": "color"
     }
   }
diff --git a/packages/ui-scripts/lib/build/tokensStudio/canvas/component/FormFieldGroup.json b/packages/ui-scripts/lib/build/tokensStudio/canvas/component/FormFieldGroup.json
@@ -1,7 +1,7 @@
 {
   "formFieldGroup": {
     "borderColor": {
-      "value": "#00000000",
+      "value": "{color.transparentColor}",
       "type": "color"
     },
     "errorBorderColor": {
diff --git a/packages/ui-scripts/lib/build/tokensStudio/canvas/component/ProgressBar.json b/packages/ui-scripts/lib/build/tokensStudio/canvas/component/ProgressBar.json
@@ -117,7 +117,7 @@
       "type": "color"
     },
     "trackColorInverse": {
-      "value": "#00000000",
+      "value": "{color.transparentColor}",
       "type": "color"
     },
     "textColor": {
diff --git a/packages/ui-scripts/lib/build/tokensStudio/canvas/semantic/color/canvas.json b/packages/ui-scripts/lib/build/tokensStudio/canvas/semantic/color/canvas.json
@@ -1341,6 +1341,10 @@
         "value": "rgba(0,0,0,0.2)",
         "type": "color"
       }
+    },
+    "transparentColor": {
+      "value": "{color.transparent}",
+      "type": "color"
     }
   },
   "dropShadow": {
diff --git a/packages/ui-scripts/lib/build/tokensStudio/canvas/semantic/color/canvasHighContrast.json b/packages/ui-scripts/lib/build/tokensStudio/canvas/semantic/color/canvasHighContrast.json
@@ -1341,6 +1341,10 @@
         "value": "rgba(0,0,0,0.2)",
         "type": "color"
       }
+    },
+    "transparentColor": {
+      "value": "{color.transparent}",
+      "type": "color"
     }
   },
   "dropShadow": {
diff --git a/packages/ui-scripts/lib/build/tokensStudio/primitives/default.json b/packages/ui-scripts/lib/build/tokensStudio/primitives/default.json
@@ -4,6 +4,10 @@
       "value": "#ffffff",
       "type": "color"
     },
+    "transparent": {
+      "value": "#00000000",
+      "type": "color"
+    },
     "green": {
       "green10": {
         "value": "#DBFCDF",
diff --git a/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/ContextView.json b/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/ContextView.json
@@ -21,7 +21,7 @@
       "type": "color"
     },
     "arrowBorderColorInverse": {
-      "value": "#00000000",
+      "value": "{color.transparentColor}",
       "type": "color"
     }
   }
diff --git a/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/FormFieldGroup.json b/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/FormFieldGroup.json
@@ -1,7 +1,7 @@
 {
   "formFieldGroup": {
     "borderColor": {
-      "value": "#00000000",
+      "value": "{color.transparentColor}",
       "type": "color"
     },
     "errorBorderColor": {
diff --git a/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/Popover.json b/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/Popover.json
@@ -1,7 +1,7 @@
 {
   "popover": {
     "borderColor": {
-      "value": "#00000000",
+      "value": "{color.transparentColor}",
       "type": "color"
     }
   }
diff --git a/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/ProgressBar.json b/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/ProgressBar.json
@@ -85,11 +85,11 @@
       "type": "sizing"
     },
     "trackBottomBorderColor": {
-      "value": "#00000000",
+      "value": "{color.transparentColor}",
       "type": "color"
     },
     "trackBottomBorderColorInverse": {
-      "value": "#00000000",
+      "value": "{color.transparentColor}",
       "type": "color"
     },
     "trackBottomBorderWidth": {
diff --git a/packages/ui-scripts/lib/build/tokensStudio/rebrand/semantic/color/rebrandDark.json b/packages/ui-scripts/lib/build/tokensStudio/rebrand/semantic/color/rebrandDark.json
@@ -1341,6 +1341,10 @@
         "value": "rgba(0,0,0,0.15)",
         "type": "color"
       }
+    },
+    "transparentColor": {
+      "value": "{color.transparent}",
+      "type": "color"
     }
   },
   "dropShadow": {
diff --git a/packages/ui-scripts/lib/build/tokensStudio/rebrand/semantic/color/rebrandLight.json b/packages/ui-scripts/lib/build/tokensStudio/rebrand/semantic/color/rebrandLight.json
@@ -1341,6 +1341,10 @@
         "value": "rgba(28,34,43,0.1)",
         "type": "color"
       }
+    },
+    "transparentColor": {
+      "value": "{color.transparent}",
+      "type": "color"
     }
   },
   "dropShadow": {

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`"type": "color"`
`22`	`22`	`},`
`23`	`23`	`"arrowBorderColorInverse": {`
`24`		`- "value": "#00000000",`
	`24`	`+ "value": "{color.transparentColor}",`
`25`	`25`	`"type": "color"`
`26`	`26`	`}`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"formFieldGroup": {`
`3`	`3`	`"borderColor": {`
`4`		`- "value": "#00000000",`
	`4`	`+ "value": "{color.transparentColor}",`
`5`	`5`	`"type": "color"`
`6`	`6`	`},`
`7`	`7`	`"errorBorderColor": {`
Original file line number	Diff line number	Diff line change
`@@ -1341,6 +1341,10 @@`
`1341`	`1341`	`"value": "rgba(0,0,0,0.2)",`
`1342`	`1342`	`"type": "color"`
`1343`	`1343`	`}`
	`1344`	`+ },`
	`1345`	`+ "transparentColor": {`
	`1346`	`+ "value": "{color.transparent}",`
	`1347`	`+ "type": "color"`
`1344`	`1348`	`}`
`1345`	`1349`	`},`
`1346`	`1350`	`"dropShadow": {`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"popover": {`
`3`	`3`	`"borderColor": {`
`4`		`- "value": "#00000000",`
	`4`	`+ "value": "{color.transparentColor}",`
`5`	`5`	`"type": "color"`
`6`	`6`	`}`
`7`	`7`	`}`