[Doc] Adds office color table to Design Tokens page

examples/Demo/Shared/Pages/Design/DesignTokensPage.razor

@@ -6,13 +6,20 @@
 
 <MarkdownSection FromAsset="./_content/FluentUI.Demo.Shared/docs/DesignTokens.md" OnContentConverted="RefreshTableOfContents" />
 
-@code {
+@if (refreshCount > 3)
+{
+    <OfficeColorTable />
+}
 
+@code {
     [CascadingParameter]
     public EventCallback OnRefreshTableOfContents { get; set; }
 
+    private int refreshCount = 0;
+
     private async Task RefreshTableOfContents()
     {
         await OnRefreshTableOfContents.InvokeAsync();
+        refreshCount++; ;
     }
 }

examples/Demo/Shared/Pages/Design/OfficeColorTable.razor

@@ -0,0 +1,48 @@
+<style>
+    th, td {
+        border: solid gray 1px;
+        padding: 0 5px;
+    }
+</style>
+
+<div>
+    <table>
+        <thead>
+            <tr>
+                <th>Product</th>
+                <th>AccentBaseColor</th>
+            </tr>
+        </thead>
+        <tbody>
+            @{
+                @foreach (var color in OfficeColorUtilities.AllColors)
+                {
+                    <tr>
+                        <td>
+                            <FluentLabel>@color</FluentLabel>
+                        </td>
+                        <td>
+                            <FluentStack>
+                                <FluentIcon Value="@(new Icons.Filled.Size20.RectangleLandscape())"
+                                            Color="Color.Custom"
+                                            CustomColor="@GetCustomColor(color)" />
+                                <FluentLabel>@GetCustomColor(color)</FluentLabel>
+                            </FluentStack>
+                        </td>
+                    </tr>
+                }
+            }
+        </tbody>
+    </table>
+</div>
+
+@code {
+    private static string? GetCustomColor(OfficeColor? color)
+    {
+        return color switch
+        {
+            OfficeColor.Default => "#036ac4",
+            _ => color.ToAttributeValue(),
+        };
+    }
+}

examples/Demo/Shared/wwwroot/docs/DesignTokens.md

@@ -336,4 +336,4 @@ To make this work, a link needs to be created between the Design Token component
 
 ## Colors for integration with specific Microsoft products
 If you are configuring the components for integration into a specific Microsoft product, the following table provides `AccentBaseColor` values you can use. 
-*The library offers an `OfficeColor` enumeration which contains the specific accent colors for 17 different Office applications.*
+*The specific accent colors for many Office applications are offered in the `OfficeColor` enumeration.*