Update design

examples/Demo/FluentUI.Demo.Client/Documentation/Theme/ThemeDesigner.razor

@@ -2,6 +2,25 @@
     <TokenEditor Style="width: 500px; height: calc(100vh - 170px); overflow-y: auto; overflow-x: hidden;" />
     <div>
         <h3>Preview:</h3>
-        <fluent-button appearance="primary">Primary</fluent-button>
+        <div style="display: flex">
+            <fluent-button appearance="primary">Primary</fluent-button>
+            <fluent-button appearance="outline">Outline</fluent-button>
+            <fluent-button appearance="subtle">Subtle</fluent-button>
+            <fluent-button appearance="transparent">Transparent</fluent-button>
+        </div>
+        <br />
+
+        <fluent-menu>
+            <fluent-menu-button aria-label="Toggle Menu" appearance="primary" slot="trigger" tabindex="0" aria-haspopup="true" aria-expanded="false">Toggle Menu</fluent-menu-button>
+            <fluent-menu-list popover="">
+                <fluent-menu-item role="menuitem" tabindex="0" data-indent="0">Menu item 1</fluent-menu-item>
+                <fluent-menu-item role="menuitem" tabindex="-1" data-indent="0">Menu item 2</fluent-menu-item>
+                <fluent-menu-item role="menuitem" tabindex="-1" data-indent="0">Menu item 3</fluent-menu-item>
+                <fluent-menu-item role="menuitem" tabindex="-1" data-indent="0">Menu item 4</fluent-menu-item>
+            </fluent-menu-list>
+        </fluent-menu>
+        <br />
+
+     
     </div>
 </div>

examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor

@@ -2,16 +2,16 @@
 
 <div style="@Style" class="theme-token-editor">
 
-    @foreach (var mainSection in Tokens.Select(i => i.Value.MainSection).Distinct())
+    @foreach (var mainSection in Tokens.Select(i => i.Value.MainSection).Distinct().Order())
     {
         <details>
             <summary>
                 @mainSection
             </summary>
 
-            @foreach (var subSection in Tokens.Where(i => i.Value.MainSection == mainSection).Select(i => i.Value.SubSection).Distinct())
+            @foreach (var subSection in Tokens.Where(i => i.Value.MainSection == mainSection).Select(i => i.Value.SubSection).Distinct().Order())
             {
-                <details style="margin-left: 24px;">
+                <details>
                     <summary>
                         @subSection
                     </summary>

examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor.cs

@@ -58,7 +58,7 @@ public partial class TokenEditor
             return "number";
         }
 
-        if (token.MainSection == "color")
+        if (token.MainSection == "Color")
         {
             return "color";
         }

examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor.css

@@ -2,6 +2,20 @@
   width: 100px;
 }
 
-.theme-token-editor ::deep input[type='color'] {
-  width: 24px;
+  .theme-token-editor ::deep input[type='color'] {
+    width: 24px;
+  }
+
+.theme-token-editor ::deep details,
+.theme-token-editor ::deep table {
+  margin-left: 16px
+}
+
+.theme-token-editor ::deep summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.theme-token-editor ::deep > details > summary {
+  list-style: square;
 }

examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenItem.cs

@@ -8,6 +8,7 @@ namespace FluentUI.Demo.Client.Documentation.Theme;
 
 internal class TokenItem
 {
+    private const string DEFAULT_SECTION = "Default";
     private string? _mainSection;
     private string? _subSection;
 
@@ -32,7 +33,9 @@ internal class TokenItem
         var pattern = @"^[a-z]+";
         var match = Regex.Match(value, pattern);
 
-        return match.Success ? match.Value : string.Empty;
+        return match.Success
+            ? CapitalizeFirstLetter(match.Value)
+            : DEFAULT_SECTION;
     }
 
     private static string GetSubSectionName(string value)
@@ -41,7 +44,20 @@ internal class TokenItem
         var match = Regex.Match(value, pattern);
 
         return match.Success && match.Groups.Count > 1
-            ? match.Groups[1].Value
-            : string.Empty;
+            ? CapitalizeFirstLetter(match.Groups[1].Value)
+            : DEFAULT_SECTION;
+    }
+
+    public static string CapitalizeFirstLetter(string input)
+    {
+        if (string.IsNullOrEmpty(input))
+        {
+            return input;
+        }
+
+        var firstChar = char.ToUpper(input[0]);
+        var restOfString = input.Substring(1);
+
+        return firstChar + restOfString;
     }
 }