Cleaned up the UI Toolkit implementation of LetterSpell

Assets/AddressableAssetsData/AddressableAssetSettings.asset

@@ -15,7 +15,7 @@ MonoBehaviour:
   m_DefaultGroup: e44b9e080d5ce064aa2fa777858a4f4d
   m_currentHash:
     serializedVersion: 2
-    Hash: 56525d59520acb454a65423041453959
+    Hash: 00000000000000000000000000000000
   m_OptimizeCatalogSize: 0
   m_BuildRemoteCatalog: 0
   m_CatalogRequestsTimeout: 0
@@ -61,33 +61,33 @@ MonoBehaviour:
   m_overridePlayerVersion: '[UnityEditor.PlayerSettings.bundleVersion]'
   m_GroupAssets:
   - {fileID: 11400000, guid: d3e4e2c785073483c86cd9a06692f3c6, type: 2}
+  - {fileID: 11400000, guid: 822373f07486e4961ad948a50f72c614, type: 2}
+  - {fileID: 11400000, guid: 88ac0f98d3c2144109d59527052380dd, type: 2}
   - {fileID: 11400000, guid: 8212e995c32ff449e85de4dfe678db4b, type: 2}
   - {fileID: 11400000, guid: fdc4e67966ae941b599f8185e4553a13, type: 2}
-  - {fileID: 11400000, guid: 1d5d364f9b5614dda825698a1a9cacfc, type: 2}
   - {fileID: 11400000, guid: 076ecdf1095cf634b9d1ad0e46628cb9, type: 2}
   - {fileID: 11400000, guid: 1e8453572c1142e439fefd36fdc32edc, type: 2}
   - {fileID: 11400000, guid: 6ed67ed2b9fd82e4ea84b4d172aa92a1, type: 2}
-  - {fileID: 11400000, guid: 0bd5c69caa78b4304a0e8a4d7c0e8899, type: 2}
   - {fileID: 11400000, guid: d02e1cb0cd3bc43b3aaec26eba2ba2cf, type: 2}
-  - {fileID: 11400000, guid: 61a5e655eb50249a58ccac1fd1d57832, type: 2}
   - {fileID: 11400000, guid: 632636d5d8f7749f5ae1a36952f924aa, type: 2}
+  - {fileID: 11400000, guid: a235547bd437e40ba88cfee73fe6afef, type: 2}
+  - {fileID: 11400000, guid: 0bd5c69caa78b4304a0e8a4d7c0e8899, type: 2}
+  - {fileID: 11400000, guid: a66040e7a1f0f492482442d8fe463828, type: 2}
   - {fileID: 11400000, guid: ef4f88f40627e5f4dbf786b246262c08, type: 2}
   - {fileID: 11400000, guid: 2e6a1ccb6d000534bb7b714e26951e06, type: 2}
   - {fileID: 11400000, guid: d9d8d49aee1153349a4c13e0c7145ccb, type: 2}
   - {fileID: 11400000, guid: f1ce45fc8bef3994cbc2c727f329cafc, type: 2}
-  - {fileID: 11400000, guid: 5d94c7a0bd4034305bf30b43a02e4291, type: 2}
   - {fileID: 11400000, guid: cc2b1da5e78ca6643b743c2e41cde192, type: 2}
   - {fileID: 11400000, guid: d0f648b5a1d3347e0ace6b74d037732e, type: 2}
+  - {fileID: 11400000, guid: 5d94c7a0bd4034305bf30b43a02e4291, type: 2}
   - {fileID: 11400000, guid: e916d8c94acefab45a62ee54e418ec7d, type: 2}
+  - {fileID: 11400000, guid: 1d5d364f9b5614dda825698a1a9cacfc, type: 2}
   - {fileID: 11400000, guid: d086f583b7a0cae428375319aff9253a, type: 2}
   - {fileID: 11400000, guid: ae26ffebd88c8b2428add93c4389c8f3, type: 2}
-  - {fileID: 11400000, guid: a66040e7a1f0f492482442d8fe463828, type: 2}
-  - {fileID: 11400000, guid: 88ac0f98d3c2144109d59527052380dd, type: 2}
+  - {fileID: 11400000, guid: 61a5e655eb50249a58ccac1fd1d57832, type: 2}
   - {fileID: 11400000, guid: 4fef78bd155109a48b208e4d8010df17, type: 2}
   - {fileID: 11400000, guid: c3c7be9bc48a7134b83d92baf56af267, type: 2}
   - {fileID: 11400000, guid: 1c773518c5ef54385a29ab964c7e4b73, type: 2}
-  - {fileID: 11400000, guid: 822373f07486e4961ad948a50f72c614, type: 2}
-  - {fileID: 11400000, guid: a235547bd437e40ba88cfee73fe6afef, type: 2}
   - {fileID: 11400000, guid: d0f0cb20d7ec1164b95f42151d183027, type: 2}
   - {fileID: 11400000, guid: 81731497086aa9b4795b0fb065535a3b, type: 2}
   - {fileID: 11400000, guid: de95fc190ea0b44cdb9ae7724f4ef834, type: 2}

Assets/Localization/String Tables/Game Text_ar.asset

@@ -163,9 +163,8 @@ MonoBehaviour:
       m_Items: []
   - m_Id: 45343066714112
     m_Localized: "\u0627\u0646\u062A\u0647\u062A \u0627\u0644\u0644\u0639\u0628\u0629!\\n\\n\u0644\u0642\u062F
-      \u0648\u062C\u062F\u062A {orderedWordCount:plural:{} \u0643\u0644\u0645\u0629
-      |{} \u0643\u0644\u0645\u0627\u062A} \u0645\u0646 \u0625\u062C\u0645\u0627\u0644\u064A
-      {totalWordCount}"
+      \u0648\u062C\u062F\u062A {orderedWordCount} \u0643\u0644\u0645\u0627\u062A
+      \u0645\u0646 \u0625\u062C\u0645\u0627\u0644\u064A {totalWordCount}"
     m_Metadata:
       m_Items:
       - rid: 2216566543976235776

Assets/Resources/UITk/IntroView.uxml

@@ -1,4 +1,3 @@
 <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
-    <Style src="project://database/Assets/Resources/UITk/Themes/GreenStyle/GreenStyle.Colors.uss?fileID=7433441132597879392&amp;guid=a91a3cd95022b4feda8886719867bb42&amp;type=3#GreenStyle.Colors" />
     <ui:VisualElement class="lsp-intro-view" style="flex-grow: 1;" />
 </ui:UXML>

Assets/Resources/UITk/Themes/Design System Files/DesignSystemTemplate.uxml

@@ -0,0 +1,13 @@
+<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
+    <ui:Template name="UIElementsDesignSystemTemplate" src="project://database/Assets/Resources/UITk/Themes/Design%20System%20Files/UIElementsDesignSystemTemplate.uxml?fileID=9197481963319205126&amp;guid=1db949a81502f4c6e88a39409aefb357&amp;type=3#UIElementsDesignSystemTemplate"/>
+    <ui:VisualElement class="lsp-background" style="flex-grow: 1;">
+        <ui:ScrollView name="ScrollView">
+            <ui:Label text="UIElements" style="-unity-font-style: bold; margin-bottom: 60px;"/>
+            <ui:Instance template="UIElementsDesignSystemTemplate" name="UIElementsDesignSystemTemplate"/>
+            <ui:Label text="Letter Spell " style="-unity-font-style: bold; margin-bottom: 60px; margin-top: 60px;"/>
+            <ui:VisualElement name="lspUIContainer" style="flex-grow: 1;">
+                <Unity.Samples.LetterSpell.LetterCardView name="letterCardView" letters="a,b,c,u" style="height: 500px;"/>
+            </ui:VisualElement>
+        </ui:ScrollView>
+    </ui:VisualElement>
+</ui:UXML>

Assets/Resources/UITk/Themes/Design System Files/UIElementsDesignSystemTemplate.uxml

@@ -0,0 +1,11 @@
+<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
+    <ui:VisualElement name="UIElementsDesignSystemTemplate">
+        <ui:Label text="Label"/>
+        <ui:Button text="Button"/>
+        <ui:Toggle label="Toggle" text="On"/>
+        <ui:RadioButton label="Radio Button"/>
+        <ui:TextField label="Text Field" placeholder-text="filler text"/>
+        <ui:DropdownField label="Dropdown" choices="Option 1,Option 2,Option 3"/>
+        <ui:Slider label="Slider" value="42" high-value="100"/>
+    </ui:VisualElement>
+</ui:UXML>

Assets/Resources/UITk/Themes/LetterSpellStyle.Common.Vars.uss

@@ -0,0 +1,123 @@
+@import url("Tokens/LetterSpellStyle.Tokens.Common.uss");
+
+:root {
+    font-size: var(--lsp-font-size-md);
+
+    /* BaseField */
+    --unity-metrics-base_field_label-min_width: var(--lsp-field-label-min-width);
+    --unity-metrics-base_field_label-margin: var(--lsp-spacing-md) var(--lsp-spacing-md);
+
+    /* Button */
+    --unity-metrics-button-border_width: var(--lsp-border-width-md);
+    --unity-metrics-button-border_radius: var(--lsp-border-radius-md);
+    --unity-metrics-button-margin: var(--lsp-spacing-sm) var(--lsp-spacing-sm);
+    --unity-metrics-button-padding: var(--lsp-spacing-md) var(--lsp-spacing-lg);
+
+    --unity-colors-button-background: var(--lsp-control-bg-color);
+    --unity-colors-button-border: var(--lsp-control-border-color);
+    --unity-colors-button-border-hover: var(--lsp-control-border-color);
+    --unity-colors-button-border-focus: var(--lsp-color-blue-600);
+    --unity-colors-button-background-hover: var(--lsp-control-bg-color-hover);
+    --unity-colors-button-background-pressed: var(--lsp-control-bg-color-pressed);
+    --unity-colors-button-background-checked: var(--lsp-control-bg-color-checked);
+
+    /* DropdownField */
+    --unity-metrics-dropdown_popup-border_width: var(--lsp-border-width-md);
+    --unity-metrics-dropdown_popup-border_radius: var(--lsp-border-radius-md);
+    --unity-metrics-dropdown_item_checkmark-width: var(--lsp-checkmark-size-sm);
+    --unity-metrics-dropdown_item_checkmark-height: var(--lsp-checkmark-size-sm);
+    --unity-metrics-dropdown_item_checkmark-margin: var(--lsp-spacing-md);
+
+    --unity-colors-dropdown_popup-border: var(--lsp-control-border-color);
+    --unity-colors-dropdown_popup-background: var(--lsp-secondary-color);
+    --unity-colors-dropdown_item-background-hover: var(--lsp-primary-color);
+
+    /* Input Field */
+    --unity-metrics-input_field-border_width: var(--lsp-border-width-md);
+    --unity-metrics-input_field-border_radius: var(--lsp-border-radius-md);
+    --unity-metrics-input_field-margin: var(--lsp-spacing-sm) var(--lsp-spacing-sm);
+    --unity-metrics-input_field-padding: var(--lsp-spacing-md) var(--lsp-spacing-lg);
+
+    --unity-colors-input_field-background: var(--lsp-input-bg-color);
+    --unity-colors-input_field-border: var(--lsp-input-border-color);
+    --unity-colors-input_field_placeholder-color: var(--lsp-input-placeholder-text-color);
+
+    /* PopupField */
+    --unity-metrics-popup_field-border_width: var(--lsp-border-width-md);
+    --unity-metrics-popup_field-border_radius: var(--lsp-border-radius-md);
+    --unity-metrics-popup_field-margin: var(--lsp-spacing-sm) var(--lsp-spacing-sm);
+    --unity-metrics-popup_field-padding: var(--lsp-spacing-md) var(--lsp-spacing-lg);
+    --unity-metrics-popup_field_arrow-width: var(--lsp-popup-field-arrow-width-md);
+    --unity-metrics-popup_field_arrow-height: var(--lsp-popup-field-arrow-width-md);
+    --unity-metrics-popup_field_arrow-margin: var(--lsp-spacing-sm) var(--lsp-spacing-md);
+
+    --unity-colors-popup_field-background: var(--lsp-control-bg-color);
+    --unity-colors-popup_field-border: var(--lsp-control-border-color);
+    --unity-colors-popup_field-border-hover: var(--lsp-control-border-color);
+    --unity-colors-popup_field-border-focus: var(--lsp-color-blue-600);
+    --unity-colors-popup_field-background-hover: var(--lsp-control-bg-color-hover);
+    --unity-colors-popup_field-background-pressed: var(--lsp-control-bg-color-checked);
+
+    /* Radio Button */
+    --unity-metrics-radio_button_checkmark_background-width: var(--lsp-checkmark-size-md);
+    --unity-metrics-radio_button_checkmark_background-border_width: var(--lsp-border-width-sm);
+    --unity-metrics-radio_button_checkmark-width: var(--lsp-checkmark-size-md);
+    --unity-metrics-toggle_checkmark-margin: var(--lsp-spacing-sm);
+    --unity-metrics-toggle_checkmark-border_width: var(--lsp-border-width-sm);
+    --unity-metrics-toggle_checkmark-border_radius: var(--lsp-border-radius-xs);
+
+    --unity-colors-radio_button_checkmark_background-background: var(--lsp-control-bg-color);
+    --unity-colors-radio_button_checkmark_background-background-hover: var(--lsp-control-bg-color-hover);
+    --unity-colors-radio_button_checkmark_background-border: var(--lsp-control-border-color);
+    --unity-colors-radio_button_checkmark-background: var(--lsp-primary-accent-color);
+    --unity-colors-radio_button_checkmark-background-hover: var(--lsp-primary-accent-color-hover);
+    --unity-colors-radio_button_checkmark-background-pressed: var(--lsp-primary-accent-color-checked);
+
+    /* Toggle */
+    --unity-metrics-toggle_checkmark-width: var(--lsp-checkmark-size-md);
+    --unity-metrics-toggle_checkmark-height: var(--lsp-checkmark-size-md);
+    --unity-metrics-toggle_checkmark-margin: var(--lsp-spacing-sm);
+    --unity-metrics-toggle_checkmark-border_width: var(--lsp-border-width-sm);
+    --unity-metrics-toggle_checkmark-border_radius: var(--lsp-border-radius-xs);
+
+    --unity-colors-toggle_checkmark-background: var(--lsp-control-bg-color);
+    --unity-colors-toggle_checkmark-background-hover: var(--lsp-control-bg-color-hover);
+    --unity-colors-toggle_checkmark-border: var(--lsp-control-border-color);
+    --unity-colors-toggle_checkmark-border-focus: var(--lsp-control-border-color);
+    --unity-colors-toggle_checkmark-text: var(--lsp-primary-accent-color);
+
+    /* Slider */
+    --unity-metrics-slider_groove-height: var(--lsp-slider-groove-height-md);
+    --unity-metrics-slider_groove-border_radius: var(--lsp-border-radius-xs);
+    --unity-metrics-slider_thumb-width: var(--lsp-slider-thumb-width-md);
+    --unity-metrics-slider_thumb-height: var(--lsp-slider-thumb-height-md);
+    --unity-metrics-slider_thumb-border_width: var(--lsp-border-width-sm);
+    --unity-metrics-slider_thumb-border_radius: var(--lsp-border-radius-xs);
+
+    --unity-colors-slider_groove-background: var(--lsp-control-border-color);
+    --unity-colors-slider_groove-background-hover: var(--lsp-control-border-color-hover);
+    --unity-colors-slider_groove-border: var(--lsp-control-border-color);
+    --unity-colors-slider_groove-border-hover: var(--lsp-control-border-color-hover);
+    --unity-colors-slider_thumb-background: var(--lsp-primary-accent-color);
+    --unity-colors-slider_thumb-background-hover: var(--lsp-primary-accent-color-hover);
+    --unity-colors-slider_thumb-border: var(--lsp-control-border-color);
+    --unity-colors-slider_thumb-border-focus: var(--lsp-control-border-color-focus);
+
+    /* Window */
+    --unity-metrics-window-border_width: var(--lsp-border-width-md);
+    --unity-metrics-window-border_radius: var(--lsp-border-radius-md);
+
+    --unity-colors-window-background: var(--lsp-color-white);
+    --unity-colors-window-border: var(--lsp-color-black);
+
+    /***************************************/
+    /*   LetterSpellStyle Specific Styles  */
+    /***************************************/
+    --lsp-metrics-letter_card_view_item-border_width: var(--lsp-border-width-md);
+    --lsp-metrics-letter_card_view_item-border_radius: var(--lsp-border-radius-md);
+
+    --lsp-colors-letter_card_view_item-background: var(--lsp-card-bg-color);
+    --lsp-colors-letter_card_view_item-background-selected: var(--lsp-card-bg-color-selected);
+    --lsp-colors-letter_card_view_item-border: var(--lsp-card-border-color);
+    --lsp-colors-letter_card_view_item-border-selected: var(--lsp-card-border-color-selected);
+}