Merge pull request 54739 from feature/sampleScene into master

Author: anton-trackman

~Samples/Elements.meta Assets.meta~Samples/Elements.meta renamed to Assets.meta

@@ -12,7 +12,7 @@ MonoBehaviour:
   m_Script: {fileID: 19101, guid: 0000000000000000e000000000000000, type: 0}
   m_Name: Panel Settings
   m_EditorClassIdentifier: 
-  themeUss: {fileID: -4733365628477956816, guid: c46080814dc260f1a9419bf0e639a60b, type: 3}
+  themeUss: {fileID: -4733365628477956816, guid: 999af05a3e7a25744b50c66afc0ac938, type: 3}
   m_TargetTexture: {fileID: 0}
   m_ScaleMode: 2
   m_Scale: 1

~Samples/Panel Settings.asset Assets/Panel Settings.asset~Samples/Panel Settings.asset renamed to Assets/Panel Settings.asset

@@ -0,0 +1,5 @@
+@import url("unity-theme://default");
+
+@import url("/Packages/com.trackman.figma/Assets/UnityBase.uss");
+
+VisualElement {}

~Samples/Panel Settings.asset.meta Assets/Panel Settings.asset.meta~Samples/Panel Settings.asset.meta renamed to Assets/Panel Settings.asset.meta

@@ -0,0 +1,75 @@
+:root {
+  --selection-color: #5890DE;
+  --cursor-color: #FFFFFF;
+}
+
+.unity-base-field {
+    flex-direction: row;
+    margin: initial;
+    overflow: hidden;
+    flex-shrink: 0;
+    --unity-sync-text-editor-engine: true;
+}
+
+.unity-base-text-field {
+    white-space: nowrap;
+    --unity-selection-color: var(--selection-color);
+    --unity-cursor-color: var(--cursor-color);
+}
+
+.unity-base-field__input {
+    flex: 1 0 0;
+    overflow: hidden;
+    margin: initial;
+}
+
+.unity-base-text-field__input {
+    padding: initial;
+    border-radius: initial;
+    cursor: initial;
+    -unity-overflow-clip-box: content-box;
+    flex: 1 1 auto;
+    background-color: initial; 
+    border-color: initial;
+    border-width: initial;
+    margin: initial;
+    --unity-sync-text-editor-engine: true;
+}
+
+.unity-base-text-field__input:focus,
+.unity-base-text-field__input:hover,
+.unity-base-text-field:focus > .unity-base-text-field__input,
+.unity-base-text-field:hover > .unity-base-text-field__input {
+    border-color: var(--selection-color);
+}
+
+.unity-base-slider,           .unity-base-slider__dragger, .unity-base-slider__tracker {
+    border-width: initial;
+    border-color: initial;
+    background-color: initial; 
+}
+.unity-base-slider:focus,     .unity-base-slider__dragger, .unity-base-slider__tracker {
+    border-color: initial;
+}
+
+.unity-base-slider--vertical, .unity-base-slider__dragger, .unity-base-slider__tracker {
+    margin: initial;
+}
+
+.unity-scroller,    .unity-base-slider__dragger, .unity-base-slider__tracker {
+    border-color: initial;
+    background-color: initial; 
+}
+
+.unity-scroller--vertical,    .unity-base-slider__dragger, .unity-base-slider__tracker {
+    left: initial;
+    top: initial;
+    margin: initial;
+    border-width: initial;
+    border-color: initial;
+    background-color: initial; 
+}
+.unity-scroller--vertical > .unity-scroller__slider {
+    margin: initial;
+    width: initial;
+}

Assets/UI Theme.tss

@@ -45,7 +45,7 @@ MonoBehaviour:
   m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
   m_Name: 
   m_EditorClassIdentifier: 
-  m_PanelSettings: {fileID: 0}
+  m_PanelSettings: {fileID: 11400000, guid: f486055d8ec653edc96c3f3c38380c8f, type: 2}
   m_ParentUI: {fileID: 0}
   sourceAsset: {fileID: 0}
   m_SortingOrder: 0
@@ -63,3 +63,5 @@ MonoBehaviour:
   m_EditorClassIdentifier: 
   title: 
   filter: 0
+  reorder: 0
+  fontsDirs: []

Assets/UI Theme.tss.meta

@@ -71,20 +71,76 @@ To start using Figma Inspector, a Figma Personal Access Token is needed for API
 4. Locate the Figma script in Unity's Inspector.
 5. Paste the token into the designated field.
 
-## Figma class (TODO)
-## Element class (OnInitialize, OnRebuild, Custom Elements) (TODO)
+## Figma class (TOBEREVIEWED)
+During the update process the Figma class retrieves data based on the Uxml and Query attributes of the Element scripts. It then utilizes this data while producing UXML asset.
+> [!WARNING]
+> Element scripts should be attached to the same game object to which the Figma script is also attached.
+
+## Element class (OnInitialize, OnRebuild, Custom Elements) (TOBEREVIEWED)
+The Uxml and Query attributes define the structure of the Uxml asset and, consequently, the appearance of your UI.
+The type of the field following the Query attribute defines the UI element itself and, consequently, its behavior (VisualElement, Button, Label, etc.). Field types are written into UXML. Therefore, if you change the field type (for example, from VisualElement to Button), you will need to perform a Figma Update to regenerate the UXML.
+Each element can override OnInitialize and OnRebuild methods which can be used to do any initial setup operations.
+
 ``` csharp
-[Uxml("SamplePage/SampleFrame", UxmlDownloadImages.Everything, UxmlElementTypeIdentification.ByElementType)]
-public class SampleFrame : Element
+[Uxml("TestPage/TestFrame", UxmlDownloadImages.Everything, UxmlElementTypeIdentification.ByElementType)]
+[AddComponentMenu("Figma/Samples/Test")]
+public class Test : Element
 {
-#region Fields
-[Query("SampleButton", Clicked = nameof(Test))] Button sampleButton;
-#endregion
+	const int minCircles = 1;
+	const int maxCircles = 7;
+
+	#region Fields
+	[Query("Header")] Label header;
+
+	[Query("CloneButton", Clicked = nameof(Clone))] Button cloneButton;
+	[Query("RemoveButton", Clicked = nameof(Remove))] Button removeButton;
+	[Query("CloneContainer", StartRoot = true)] VisualElement cloneContainer;
+	[Query("CloneCircle", EndRoot = true)] PerfectCircle cloneCircle;
+
+	[Query("SyncButton", Clicked = nameof(Sync))] Button syncButton;
+	[Query("SyncContainer")] VisualElement syncContainer;
+	[Query("SyncContainer/SyncCircle")] PerfectCircle syncCircle;
+
+	[Query("FunctionDescription", Hide = true)] Label functionDescription;
+	#endregion
+
+	#region Methods
+	protected override void OnInitialize() => cloneContainer.style.flexWrap = Wrap.NoWrap;
+	protected override void OnRebuild() => header.text = "Welcome to Figma Test Frame!";
 
-    #region Methods
-    void Test() => Debug.Log("Test");
-    #endregion
+	void Clone()
+	{
+		if (cloneContainer.childCount == maxCircles) return;
+
+		cloneCircle.Clone(cloneContainer);
+	}
+	void Remove()
+	{
+		if (cloneContainer.childCount == minCircles) return;
+
+		cloneContainer.Remove(cloneContainer.Children().First());
+	}
+	void Sync()
+	{
+		void RandomColor(int index) => syncContainer.Children().ElementAt(index).style.backgroundColor = Random.ColorHSV();
+
+		syncCircle.Sync(syncContainer, RandomColor, Enumerable.Range(0, Random.Range(1, maxCircles + 1)));
+		syncCircle.Hide();
+
+		functionDescription.Show();
+	}
+	#endregion
+}
+```
+### Custom element example
+``` csharp
+public class PerfectCircle : SyncButtonSimple<int>
+{
+	public new class UxmlFactory : UxmlFactory<PerfectCircle> { }
 
+	#region Methods
+	public override bool IsVisible(int index, int data) => true;
+	#endregion
 }
 ```
 
@@ -159,7 +215,7 @@ This interface serves as an identifier, signifying that within the IRootElement
 ## IRootElement
 This interface acts as a marker, indicating that an element within the IRootElement hierarchy is capable of functioning as a component derived from the VisualElement class.
 
-## Visual Element Style (TOBEREVIEWED)
+## Visual Element Style
 The imported USS file contains all the classes used by Visual Elements. USS is inspired by CSS and has a similar syntax. To manipulate properties in your code, you should use the techniques described below.
 ### Changing Element Appearance
 To change the appearance of a VisualElement, you should manipulate its style properties. For example, to set the top margin of an element to 3:
@@ -173,7 +229,7 @@ float margin = element.resolvedStyle.marginTop;
 ```
 > You can find the list of all supported properties in the official Unity documentation.
 
-## Visual Element Extensions (TOBEREVIEWED)
+## Visual Element Extensions
 When working with VisualElements, there are various visual element extensions that allow you to find/clone/replace/etc elements:
 ```csharp
 VisualElement rectangle = element.Find<VisualElement>("Rectangle");