From c79352a92f6b99a6641f7ae1403d9d7ed5c09c77 Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Mon, 18 Dec 2023 11:44:50 +0000
Subject: [PATCH 1/8] docs: Adding csharp markup code examples

---
 doc/material-controls-extensions.md | 116 ++++++++++++++++++++---
 doc/material-getting-started.md     | 138 +++++++++++++++++++++-------
 2 files changed, 208 insertions(+), 46 deletions(-)

diff --git a/doc/material-controls-extensions.md b/doc/material-controls-extensions.md
index 15ae35018..d769275dc 100644
--- a/doc/material-controls-extensions.md
+++ b/doc/material-controls-extensions.md
@@ -4,14 +4,18 @@ uid: Uno.Themes.Material.Extensions
 
 # Material Control Extensions
 
+> [!NOTE]
+> Uno Material also has support for C# Markup through a [Uno.Material.WinUI.Markup](https://www.nuget.org/packages/Uno.Material.WinUI.Markup) NuGet Package. To get started with Uno Material in your C# Markup application, add the `Uno.Material.WinUI.Markup` NuGet package to your **App Code Library** project and your platform heads.
+
 ## Icon
 
-This feature allows for the addition of icon on the supported controls. Those icons could be any of the [`IconElement`](https://docs.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.iconelement)s: `<BitmapIcon />`, `<FontIcon />`, `<PathIcon />` or `<SymbolIcon />`.
+This feature allows for the addition of icon on the supported controls. Those icons could be any of the [`IconElement`](https://docs.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.iconelement)s: `BitmapIcon`, `FontIcon`, `PathIcon` or `SymbolIcon`.
 
 Here are supported control with samples:
 
 * TextBox:
 
+# [**XAML**](#tab/xaml)
     ```xml
     <TextBox Style="{StaticResource MaterialFilledTextBoxStyle}">
         <um:ControlExtensions.Icon>
@@ -20,8 +24,23 @@ Here are supported control with samples:
     </ComboBox>
     ```
 
+# [**C#**](#tab/csharp)
+    ```csharp
+    new TextBox()
+        .Style(Theme.TextBox.Styles.Filled)
+        .ControlExtensions
+        (
+            icon:
+                new SymbolIcon()
+                    .Symbol(Symbol.SolidStar)
+        )
+    ```
+
+***
+
 * ComboBox:
 
+# [**XAML**](#tab/xaml)
     ```xml
     <ComboBox Style="{StaticResource MaterialComboBoxStyle}">
         <um:ControlExtensions.Icon>
@@ -30,6 +49,19 @@ Here are supported control with samples:
     </ComboBox>
     ```
 
+# [**C#**](#tab/csharp)
+    ```csharp
+    new ComboBox()
+        .Style(Theme.ComboBox.Styles.Default)
+        .ControlExtensions
+        (
+            icon:
+                new SymbolIcon()
+                    .Symbol(Symbol.SolidStar)
+        )
+    ```
+***
+
 ## Alternate Content
 
 This feature allows putting different content on a control when the state changes.
@@ -37,17 +69,38 @@ It's control specific and for now, you can only use it with the ToggleButton con
 
 ### Alternate Content on ToggleButton
 
-```xml
-<ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
-    <!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
-    <PathIcon Data="{StaticResource Icon_more_horizontal}" />
-
-    <!-- This is the alternate content - which is when the control state is CHECKED -->
-    <um:ControlExtensions.AlternateContent>
-        <PathIcon Data="{StaticResource Icon_more_vertical}" />
-    </um:ControlExtensions.AlternateContent>
-</ToggleButton>
-```
+# [**XAML**](#tab/xaml)
+    ```xml
+    <ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
+        <!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
+        <PathIcon Data="{StaticResource Icon_more_horizontal}" />
+
+        <!-- This is the alternate content - which is when the control state is CHECKED -->
+        <um:ControlExtensions.AlternateContent>
+            <PathIcon Data="{StaticResource Icon_more_vertical}" />
+        </um:ControlExtensions.AlternateContent>
+    </ToggleButton>
+    ```
+
+# [**C#**](#tab/csharp)
+    ```csharp
+    new ToggleButton()
+        .Style(Theme.ToggleButton.Styles.Icon)
+        // This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton)
+        .Content
+        (
+            new PathIcon()
+                .Data(StaticResource.Get<Geometry>("Icon_more_horizontal"))
+        )
+        // This is the alternate content - which is when the control state is CHECKED
+        .ControlExtensions
+        (
+            alternateContent:
+                new PathIcon()
+                    .Data(StaticResource.Get<Geometry>("Icon_more_vertical"))
+        )
+    ```
+***
 
 ## Elevation
 
@@ -97,6 +150,7 @@ Within the `ControlTemplate` of the `ElevatedButtonStyle`, instead of performing
 
 Applying the surface tint for elevated controls is optional and must be explicitly enabled through the use of the `IsTintEnabled` attached property. Below is an example of how an elevated control may appear  with or without a surface tint:
 
+# [**XAML**](#tab/xaml)
 ```xml
 <StackPanel Spacing="8">
     <Button Content="Elevation 0"
@@ -120,11 +174,45 @@ Applying the surface tint for elevated controls is optional and must be explicit
 </StackPanel> 
 ```
 
-The above XAML will produce the following result:
+# [**C#**](#tab/csharp)
+```csharp
+new StackPanel()
+    .Spacing(8)
+    .Children(
+        new Button()
+            .Content("Elevation 0")
+            .ControlExtensions(elevation: 0)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 1")
+            .ControlExtensions(elevation: 1)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 2")
+            .ControlExtensions(elevation: 2)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 3")
+            .ControlExtensions(elevation: 3)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 4")
+            .ControlExtensions(elevation: 4)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 5")
+            .ControlExtensions(elevation: 5)
+            .Style(Theme.Button.Styles.Elevated)
+    )
+```
+
+***
+
+The above code will produce the following result:
 
 ![Uno Material Elevation Buttons with Tint Enabled](assets/material-elevation-buttons.png)
 
-If we were to alter the XAML above and set `um:ControlExtensions.IsTintEnabled="False"` on each of the buttons, we would see elevated buttons without tints:
+If we were to alter the code above and set `IsTintEnabled` to `False` (XAML: `um:ControlExtensions.IsTintEnabled="False"` / C#: `ControlExtensions(isTintEnabled: false)`) on each of the buttons, we would see elevated buttons without tints:
 
 ![Uno Material Elevation Buttons with Tint Disabled](assets/material-elevation-buttons-shadow-only.png)
 
diff --git a/doc/material-getting-started.md b/doc/material-getting-started.md
index 7fd1561fe..230d15dc6 100644
--- a/doc/material-getting-started.md
+++ b/doc/material-getting-started.md
@@ -34,14 +34,18 @@ Initialization of the Uno.Material resources is handled by the specialized `Mate
 | ColorOverrideSource             | string            | (Optional) Gets or sets a Uniform Resource Identifier that provides the source location of a ResourceDictionary containing overrides for the default Uno.Material Color resources                                            |
 | FontOverrideSource     | string      | (Optional) Gets or sets a Uniform Resource Identifier that provides the source location of a ResourceDictionary containing overrides for the default Uno.Material font resources            |
 
+> [!NOTE]
+> Uno Material also has support for C# Markup through a [Uno.Material.WinUI.Markup](https://www.nuget.org/packages/Uno.Material.WinUI.Markup) NuGet Package. To get started with Uno Material in your C# Markup application, add the `Uno.Material.WinUI.Markup` NuGet package to your **App Code Library** project and your platform heads.
+
 > [!NOTE]
 > As of [Uno Platform 4.7](https://platform.uno/blog/uno-platform-4-7-new-project-template-performance-improvements-and-more/), the solution template of an Uno app has changed. There is no longer a Shared project (.shproj), it has been replaced with a regular cross-platform library containing all user code files, referred to as the **App Code Library** project. This also implies that package references can be included in a single location without the previous need to include those in all project heads.
 
 1. Create a new Uno project using the `Uno Platform App` template.
 2. In the Solution Explorer panel, right-click on your app's **App Code Library** project (`PROJECT_NAME.csproj`) and select `Manage NuGet Packages...`
-3. Install the [`Uno.Material.WinUI`](https://www.nuget.org/packages/Uno.Material.WinUI)
-4. Add the following Material resources to `AppResources.xaml`:
+3. Install the [`Uno.Material.WinUI`](https://www.nuget.org/packages/Uno.Material.WinUI) for XAML or [`Uno.Material.WinUI.Markup`](https://www.nuget.org/packages/Uno.Material.WinUI.Markup) for C# Markup.
+4. Add the following Material resources to `AppResources`:
 
+# [**XAML**](#tab/xaml)
     ```xml
     <ResourceDictionary>
         <ResourceDictionary.MergedDictionaries>
@@ -53,6 +57,23 @@ Initialization of the Uno.Material resources is handled by the specialized `Mate
     </ResourceDictionary>
     ```
 
+# [**C#**](#tab/csharp)
+    ```csharp
+    using Uno.Material;
+
+    public sealed class AppResources : ResourceDictionary
+    {
+        public AppResources()
+        {
+            // Load Uno.Material resources
+            this.Build(r => r.Merged(
+                new MaterialTheme()));
+        }
+    }
+    ```
+
+***
+
 ### Installing Uno.Material on previous versions of Uno Platform
 
 If your application is based on the older solution template that includes a shared project (.shproj), follow these steps:
@@ -60,7 +81,7 @@ If your application is based on the older solution template that includes a shar
 1. Open an existing Uno project
 2. In the Solution Explorer panel, right-click on your solution name and select `Manage NuGet Packages for Solution ...`. Choose either:
      - The [`Uno.Material`](https://www.nuget.org/packages/Uno.Material/) package when targetting Xamarin/UWP
-     - The [`Uno.Material.WinUI`](https://www.nuget.org/packages/Uno.Material.WinUI) package when targetting net6.0+/WinUI
+     - The [`Uno.Material.WinUI`](https://www.nuget.org/packages/Uno.Material.WinUI) package for XAML or [`Uno.Material.WinUI.Markup`](https://www.nuget.org/packages/Uno.Material.WinUI.Markup) for C# Markup, when targetting net6.0+/WinUI
 
 3. Select the following projects for installation:
     - `PROJECT_NAME.Wasm.csproj`
@@ -68,7 +89,7 @@ If your application is based on the older solution template that includes a shar
     - `PROJECT_NAME.Skia.Gtk.csproj`
     - `PROJECT_NAME.Skia.WPF.csproj`
     - `PROJECT_NAME.Windows.csproj` (or `PROJECT_NAME.UWP.csproj` for existing projects)
-4. Add the following resources inside `App.xaml`:
+4. Add the following resources inside the `App` file:
 
     ```xml
     <Application ...>
@@ -107,10 +128,10 @@ Follow this link to get [more Information about the DSP tooling](xref:Uno.Materi
 
 Use this when you want to specify MANUALLY each colors.
 
-1. In the application's **App Code Library** project (`PROJECT_NAME.csproj`), add a new Resource Dictionary named `MaterialColorsOverride.xaml`
+1. In the application's **App Code Library** project (`PROJECT_NAME.csproj`), add a new Resource Dictionary named `MaterialColorsOverride.xaml` for XAML or a new class inheriting from `ResourceDictionary` named `ColorPaletteOverride.cs` for C# Markup.
 2. Save the new override file within the **App Code Library**, for example, under `Styles/Application`.
 3. Replace the content with:
-
+# [**XAML**](#tab/xaml)
     ```xml
     <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
@@ -225,14 +246,63 @@ Use this when you want to specify MANUALLY each colors.
         </ResourceDictionary.ThemeDictionaries>
     </ResourceDictionary>
     ```
-
-4. In `AppResources.xaml`, update `<MaterialTheme />` with the override from the previous steps:
-
+# [**C#**](#tab/csharp)
+    ```csharp
+    namespace PROJECT_NAME.Styles;
+
+    public sealed partial class ColorPaletteOverride : ResourceDictionary
+    {
+        public ColorPaletteOverride()
+        {
+            this.Build
+            (
+                r => r
+                    .Add(Uno.Themes.Markup.Theme.Colors.Primary.Default, light: "#6750A4", dark: "#D0BCFF")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Primary.Inverse, light: "#D0BCFF", dark: "#6750A4")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Primary.Container, light: "#EADDFF", dark: "#4F378B")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Default, light: "#FFFFFF", dark: "#371E73")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Container, light: "#21005E", dark: "#EADDFF")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Default, light: "#625B71", dark: "#CCC2DC")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Container, light: "#E5DFF9", dark: "#474459")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Default, light: "#FFFFFF", dark: "#332D41")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Container, light: "#1B192C", dark: "#E5DFF9")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Default, light: "#7D5260", dark: "#EFB8C8")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Container, light: "#FFD8E4", dark: "#633B48")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Default, light: "#FFFFFF", dark: "#492532")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Container, light: "#370B1E", dark: "#FFD8E4")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Error.Default, light: "#B3261E", dark: "#F2B8B5")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Error.Container, light: "#F9DEDC", dark: "#8C1D18")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnError.Default, light: "#FFFFFF", dark: "#601410")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnError.Container, light: "#370B1E", dark: "#F9DEDC")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Background.Default, light: "#FFFBFE", dark: "#1C1B1F")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnBackground.Default, light: "#1C1B1F", dark: "#E6E1E5")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Default, light: "#FFFBFE", dark: "#1C1B1F")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Variant, light: "#E7E0EC", dark: "#49454F")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Inverse, light: "#313033", dark: "#E6E1E5")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Tint, light: "#5946D2", dark: "#C7BFFF")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Default, light: "#1C1B1F", dark: "#E6E1E5")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Variant, light: "#A5A0AC", dark: "#CAC4D0")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Inverse, light: "#F4EFF4", dark: "#313033")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Outline.Default, light: "#79747E", dark: "#938F99")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Outline.Variant, light: "#C9C5D0", dark: "#57545D")		
+            );
+        }
+    }
+    ```
+***
+4. In `AppResources` file, update `MaterialTheme` with the override from the previous steps:
+# [**XAML**](#tab/xaml)
     ```xml
     <MaterialTheme xmlns="using:Uno.Material"
                    ColorOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialColorsOverride.xaml" />
     ```
-
+# [**C#**](#tab/csharp)
+    ```csharp
+    this.Build(r => r.Merged(
+			new MaterialTheme()
+				.ColorOverrideDictionary(new Styles.ColorPaletteOverride())));
+    ```
+***
 ### Change Default Font
 
 By default, Uno.Material comes pre-packaged with the [Roboto](https://fonts.google.com/specimen/Roboto) font families and automatically includes them in your application. Upon installation of the Uno.Material package, you will have the following resources available: `MaterialLightFontFamily`, `MaterialRegularFontFamily`, and `MaterialMediumFontFamily`.
@@ -240,10 +310,10 @@ By default, Uno.Material comes pre-packaged with the [Roboto](https://fonts.goog
 If you would like Uno.Material to use a different font, you can override the default font families following these steps:
 
 1. Add the custom font following [this guide](https://platform.uno/docs/articles/features/custom-fonts.html)
-2. In the application's **App Code Library** project (`PROJECT_NAME.csproj`), add a new Resource Dictionary named `MaterialFontsOverride.xaml`
+2. In the application's **App Code Library** project (`PROJECT_NAME.csproj`), add a new Resource Dictionary named `MaterialFontsOverride.xaml` for XAML or a new class inheriting from `ResourceDictionary` named `MaterialFontsOverride.cs` for C# Markup
 3. Save the new override file within the **App Code Library**, for example, under `Styles/Application`.
 4. Assuming the font file has been placed in the **App Code Library** within, for example, a directory such as `Assets/Fonts/MyCustomFont.ttf`, your override file would look like the following:
-
+# [**XAML**](#tab/xaml)
     ```xml
     <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
@@ -254,30 +324,34 @@ If you would like Uno.Material to use a different font, you can override the def
 
     </ResourceDictionary>
     ```
-
-5. In `AppResources.xaml`, update `<MaterialTheme />` with the override from the previous steps:
-
+# [**C#**](#tab/csharp)
+    ```csharp
+    namespace PROJECT_NAME.Styles;
+
+    public sealed class MaterialFontsOverride : ResourceDictionary
+    {
+        public MaterialFontsOverride()
+        {
+            this.Build(r => r
+                .Add<FontFamily>("MaterialLightFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont")
+                .Add<FontFamily>("MaterialMediumFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont")
+                .Add<FontFamily>("MaterialRegularFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont"));
+        }
+    }
+    ```
+***
+5. In `AppResources` file, update `MaterialTheme` with the override from the previous steps:
+# [**XAML**](#tab/xaml)
     ```xml
     <MaterialTheme xmlns="using:Uno.Material"
                    FontOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialFontsOverride.xaml" />
     ```
-
-## Using C# Markup
-
-Uno Material also has support for C# Markup through a [Uno.Material.WinUI.Markup](https://www.nuget.org/packages/Uno.Material.WinUI.Markup) NuGet Package.
-
-To get started with Uno Material in your C# Markup application, add the `Uno.Material.WinUI.Markup` NuGet package to your **App Code Library** project and your platform heads.
-Then, add the following code to your `AppResources.cs`:
-
-```csharp
-using Uno.Material.Markup;
-
-this.Build(r => r.UseMaterial(
-     //optional
-     new Styles.ColorPaletteOverride(),
-     //optional
-     new Styles.MaterialFontsOverride()));
-```
+# [**C#**](#tab/csharp)
+    ```csharp
+    this.Build(r => r.Merged(
+        new MaterialTheme()
+            .FontOverrideDictionary(new Styles.MaterialFontsOverride())));
+    ```
 
 ## Additional Resources
 

From 98a6d04db3aabaa666d98e88271ec8754daefdd9 Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Mon, 18 Dec 2023 12:13:26 +0000
Subject: [PATCH 2/8] chore: Code snippet format

---
 doc/material-getting-started.md | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/doc/material-getting-started.md b/doc/material-getting-started.md
index 230d15dc6..1c6c17326 100644
--- a/doc/material-getting-started.md
+++ b/doc/material-getting-started.md
@@ -46,7 +46,7 @@ Initialization of the Uno.Material resources is handled by the specialized `Mate
 4. Add the following Material resources to `AppResources`:
 
 # [**XAML**](#tab/xaml)
-    ```xml
+
     <ResourceDictionary>
         <ResourceDictionary.MergedDictionaries>
 
@@ -55,10 +55,8 @@ Initialization of the Uno.Material resources is handled by the specialized `Mate
 
         </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>
-    ```
 
 # [**C#**](#tab/csharp)
-    ```csharp
     using Uno.Material;
 
     public sealed class AppResources : ResourceDictionary
@@ -70,7 +68,6 @@ Initialization of the Uno.Material resources is handled by the specialized `Mate
                 new MaterialTheme()));
         }
     }
-    ```
 
 ***
 

From 64c746535b39523b1142ccfe43020db08343d620 Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Mon, 18 Dec 2023 12:17:47 +0000
Subject: [PATCH 3/8] chore: Uniformize tab code snippet

---
 doc/material-controls-extensions.md | 125 ++++++++++++++--------------
 doc/material-getting-started.md     |  32 +++----
 2 files changed, 77 insertions(+), 80 deletions(-)

diff --git a/doc/material-controls-extensions.md b/doc/material-controls-extensions.md
index d769275dc..5d7a16bcd 100644
--- a/doc/material-controls-extensions.md
+++ b/doc/material-controls-extensions.md
@@ -16,16 +16,16 @@ Here are supported control with samples:
 * TextBox:
 
 # [**XAML**](#tab/xaml)
-    ```xml
+
     <TextBox Style="{StaticResource MaterialFilledTextBoxStyle}">
         <um:ControlExtensions.Icon>
             <SymbolIcon Symbol="SolidStar" />
         </um:ControlExtensions.Icon>
     </ComboBox>
-    ```
+
 
 # [**C#**](#tab/csharp)
-    ```csharp
+
     new TextBox()
         .Style(Theme.TextBox.Styles.Filled)
         .ControlExtensions
@@ -34,23 +34,21 @@ Here are supported control with samples:
                 new SymbolIcon()
                     .Symbol(Symbol.SolidStar)
         )
-    ```
 
 ***
 
 * ComboBox:
 
 # [**XAML**](#tab/xaml)
-    ```xml
+
     <ComboBox Style="{StaticResource MaterialComboBoxStyle}">
         <um:ControlExtensions.Icon>
             <SymbolIcon Symbol="SolidStar" />
         </um:ControlExtensions.Icon>
     </ComboBox>
-    ```
 
 # [**C#**](#tab/csharp)
-    ```csharp
+
     new ComboBox()
         .Style(Theme.ComboBox.Styles.Default)
         .ControlExtensions
@@ -59,7 +57,7 @@ Here are supported control with samples:
                 new SymbolIcon()
                     .Symbol(Symbol.SolidStar)
         )
-    ```
+
 ***
 
 ## Alternate Content
@@ -70,7 +68,7 @@ It's control specific and for now, you can only use it with the ToggleButton con
 ### Alternate Content on ToggleButton
 
 # [**XAML**](#tab/xaml)
-    ```xml
+
     <ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
         <!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
         <PathIcon Data="{StaticResource Icon_more_horizontal}" />
@@ -80,10 +78,9 @@ It's control specific and for now, you can only use it with the ToggleButton con
             <PathIcon Data="{StaticResource Icon_more_vertical}" />
         </um:ControlExtensions.AlternateContent>
     </ToggleButton>
-    ```
 
 # [**C#**](#tab/csharp)
-    ```csharp
+
     new ToggleButton()
         .Style(Theme.ToggleButton.Styles.Icon)
         // This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton)
@@ -99,7 +96,7 @@ It's control specific and for now, you can only use it with the ToggleButton con
                 new PathIcon()
                     .Data(StaticResource.Get<Geometry>("Icon_more_vertical"))
         )
-    ```
+
 ***
 
 ## Elevation
@@ -151,60 +148,60 @@ Within the `ControlTemplate` of the `ElevatedButtonStyle`, instead of performing
 Applying the surface tint for elevated controls is optional and must be explicitly enabled through the use of the `IsTintEnabled` attached property. Below is an example of how an elevated control may appear  with or without a surface tint:
 
 # [**XAML**](#tab/xaml)
-```xml
-<StackPanel Spacing="8">
-    <Button Content="Elevation 0"
-            um:ControlExtensions.Elevation="0"
-            Style="{StaticResource MaterialElevatedButtonStyle}" />
-    <Button Content="Elevation 1"
-            um:ControlExtensions.Elevation="1"
-            Style="{StaticResource MaterialElevatedButtonStyle}" />
-    <Button Content="Elevation 2"
-            um:ControlExtensions.Elevation="2"
-            Style="{StaticResource MaterialElevatedButtonStyle}" />
-    <Button Content="Elevation 3"
-            um:ControlExtensions.Elevation="3"
-            Style="{StaticResource MaterialElevatedButtonStyle}" />
-    <Button Content="Elevation 4"
-            um:ControlExtensions.Elevation="4"
-            Style="{StaticResource MaterialElevatedButtonStyle}" />
-    <Button Content="Elevation 5"
-            um:ControlExtensions.Elevation="5"
-            Style="{StaticResource MaterialElevatedButtonStyle}" />
-</StackPanel> 
-```
+
+    <StackPanel Spacing="8">
+        <Button Content="Elevation 0"
+                um:ControlExtensions.Elevation="0"
+                Style="{StaticResource MaterialElevatedButtonStyle}" />
+        <Button Content="Elevation 1"
+                um:ControlExtensions.Elevation="1"
+                Style="{StaticResource MaterialElevatedButtonStyle}" />
+        <Button Content="Elevation 2"
+                um:ControlExtensions.Elevation="2"
+                Style="{StaticResource MaterialElevatedButtonStyle}" />
+        <Button Content="Elevation 3"
+                um:ControlExtensions.Elevation="3"
+                Style="{StaticResource MaterialElevatedButtonStyle}" />
+        <Button Content="Elevation 4"
+                um:ControlExtensions.Elevation="4"
+                Style="{StaticResource MaterialElevatedButtonStyle}" />
+        <Button Content="Elevation 5"
+                um:ControlExtensions.Elevation="5"
+                Style="{StaticResource MaterialElevatedButtonStyle}" />
+    </StackPanel> 
+
 
 # [**C#**](#tab/csharp)
-```csharp
-new StackPanel()
-    .Spacing(8)
-    .Children(
-        new Button()
-            .Content("Elevation 0")
-            .ControlExtensions(elevation: 0)
-            .Style(Theme.Button.Styles.Elevated),
-        new Button()
-            .Content("Elevation 1")
-            .ControlExtensions(elevation: 1)
-            .Style(Theme.Button.Styles.Elevated),
-        new Button()
-            .Content("Elevation 2")
-            .ControlExtensions(elevation: 2)
-            .Style(Theme.Button.Styles.Elevated),
-        new Button()
-            .Content("Elevation 3")
-            .ControlExtensions(elevation: 3)
-            .Style(Theme.Button.Styles.Elevated),
-        new Button()
-            .Content("Elevation 4")
-            .ControlExtensions(elevation: 4)
-            .Style(Theme.Button.Styles.Elevated),
-        new Button()
-            .Content("Elevation 5")
-            .ControlExtensions(elevation: 5)
-            .Style(Theme.Button.Styles.Elevated)
-    )
-```
+
+    new StackPanel()
+        .Spacing(8)
+        .Children(
+            new Button()
+                .Content("Elevation 0")
+                .ControlExtensions(elevation: 0)
+                .Style(Theme.Button.Styles.Elevated),
+            new Button()
+                .Content("Elevation 1")
+                .ControlExtensions(elevation: 1)
+                .Style(Theme.Button.Styles.Elevated),
+            new Button()
+                .Content("Elevation 2")
+                .ControlExtensions(elevation: 2)
+                .Style(Theme.Button.Styles.Elevated),
+            new Button()
+                .Content("Elevation 3")
+                .ControlExtensions(elevation: 3)
+                .Style(Theme.Button.Styles.Elevated),
+            new Button()
+                .Content("Elevation 4")
+                .ControlExtensions(elevation: 4)
+                .Style(Theme.Button.Styles.Elevated),
+            new Button()
+                .Content("Elevation 5")
+                .ControlExtensions(elevation: 5)
+                .Style(Theme.Button.Styles.Elevated)
+        )
+
 
 ***
 
diff --git a/doc/material-getting-started.md b/doc/material-getting-started.md
index 1c6c17326..3c3200c6e 100644
--- a/doc/material-getting-started.md
+++ b/doc/material-getting-started.md
@@ -129,7 +129,7 @@ Use this when you want to specify MANUALLY each colors.
 2. Save the new override file within the **App Code Library**, for example, under `Styles/Application`.
 3. Replace the content with:
 # [**XAML**](#tab/xaml)
-    ```xml
+
     <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
         <ResourceDictionary.ThemeDictionaries>
@@ -242,9 +242,9 @@ Use this when you want to specify MANUALLY each colors.
 
         </ResourceDictionary.ThemeDictionaries>
     </ResourceDictionary>
-    ```
+
 # [**C#**](#tab/csharp)
-    ```csharp
+
     namespace PROJECT_NAME.Styles;
 
     public sealed partial class ColorPaletteOverride : ResourceDictionary
@@ -285,20 +285,20 @@ Use this when you want to specify MANUALLY each colors.
             );
         }
     }
-    ```
+
 ***
 4. In `AppResources` file, update `MaterialTheme` with the override from the previous steps:
 # [**XAML**](#tab/xaml)
-    ```xml
+
     <MaterialTheme xmlns="using:Uno.Material"
                    ColorOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialColorsOverride.xaml" />
-    ```
+
 # [**C#**](#tab/csharp)
-    ```csharp
+
     this.Build(r => r.Merged(
 			new MaterialTheme()
 				.ColorOverrideDictionary(new Styles.ColorPaletteOverride())));
-    ```
+
 ***
 ### Change Default Font
 
@@ -311,7 +311,7 @@ If you would like Uno.Material to use a different font, you can override the def
 3. Save the new override file within the **App Code Library**, for example, under `Styles/Application`.
 4. Assuming the font file has been placed in the **App Code Library** within, for example, a directory such as `Assets/Fonts/MyCustomFont.ttf`, your override file would look like the following:
 # [**XAML**](#tab/xaml)
-    ```xml
+
     <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
@@ -320,9 +320,9 @@ If you would like Uno.Material to use a different font, you can override the def
         <FontFamily x:Key="MaterialRegularFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont</FontFamily>
 
     </ResourceDictionary>
-    ```
+
 # [**C#**](#tab/csharp)
-    ```csharp
+
     namespace PROJECT_NAME.Styles;
 
     public sealed class MaterialFontsOverride : ResourceDictionary
@@ -335,20 +335,20 @@ If you would like Uno.Material to use a different font, you can override the def
                 .Add<FontFamily>("MaterialRegularFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont"));
         }
     }
-    ```
+
 ***
 5. In `AppResources` file, update `MaterialTheme` with the override from the previous steps:
 # [**XAML**](#tab/xaml)
-    ```xml
+
     <MaterialTheme xmlns="using:Uno.Material"
                    FontOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialFontsOverride.xaml" />
-    ```
+
 # [**C#**](#tab/csharp)
-    ```csharp
+
     this.Build(r => r.Merged(
         new MaterialTheme()
             .FontOverrideDictionary(new Styles.MaterialFontsOverride())));
-    ```
+
 
 ## Additional Resources
 

From 066d1b39422f35c6c52519f0985c37b8a69a40be Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Mon, 18 Dec 2023 12:23:38 +0000
Subject: [PATCH 4/8] chore: tweaks

---
 doc/material-getting-started.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/doc/material-getting-started.md b/doc/material-getting-started.md
index 3c3200c6e..66df0985e 100644
--- a/doc/material-getting-started.md
+++ b/doc/material-getting-started.md
@@ -337,6 +337,7 @@ If you would like Uno.Material to use a different font, you can override the def
     }
 
 ***
+
 5. In `AppResources` file, update `MaterialTheme` with the override from the previous steps:
 # [**XAML**](#tab/xaml)
 
@@ -349,6 +350,7 @@ If you would like Uno.Material to use a different font, you can override the def
         new MaterialTheme()
             .FontOverrideDictionary(new Styles.MaterialFontsOverride())));
 
+***
 
 ## Additional Resources
 

From b8d2a3b7784e1b61590a26ff11dea069c24548ac Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Mon, 18 Dec 2023 12:32:11 +0000
Subject: [PATCH 5/8] chore: Tab snippets improvements

---
 doc/material-controls-extensions.md | 193 ++++++++-------
 doc/material-getting-started.md     | 362 +++++++++++++---------------
 2 files changed, 266 insertions(+), 289 deletions(-)

diff --git a/doc/material-controls-extensions.md b/doc/material-controls-extensions.md
index 5d7a16bcd..645d09e2a 100644
--- a/doc/material-controls-extensions.md
+++ b/doc/material-controls-extensions.md
@@ -17,23 +17,23 @@ Here are supported control with samples:
 
 # [**XAML**](#tab/xaml)
 
-    <TextBox Style="{StaticResource MaterialFilledTextBoxStyle}">
-        <um:ControlExtensions.Icon>
-            <SymbolIcon Symbol="SolidStar" />
-        </um:ControlExtensions.Icon>
-    </ComboBox>
+<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}">
+    <um:ControlExtensions.Icon>
+        <SymbolIcon Symbol="SolidStar" />
+    </um:ControlExtensions.Icon>
+</ComboBox>
 
 
 # [**C#**](#tab/csharp)
 
-    new TextBox()
-        .Style(Theme.TextBox.Styles.Filled)
-        .ControlExtensions
-        (
-            icon:
-                new SymbolIcon()
-                    .Symbol(Symbol.SolidStar)
-        )
+new TextBox()
+    .Style(Theme.TextBox.Styles.Filled)
+    .ControlExtensions
+    (
+        icon:
+            new SymbolIcon()
+                .Symbol(Symbol.SolidStar)
+    )
 
 ***
 
@@ -41,22 +41,22 @@ Here are supported control with samples:
 
 # [**XAML**](#tab/xaml)
 
-    <ComboBox Style="{StaticResource MaterialComboBoxStyle}">
-        <um:ControlExtensions.Icon>
-            <SymbolIcon Symbol="SolidStar" />
-        </um:ControlExtensions.Icon>
-    </ComboBox>
+<ComboBox Style="{StaticResource MaterialComboBoxStyle}">
+    <um:ControlExtensions.Icon>
+        <SymbolIcon Symbol="SolidStar" />
+    </um:ControlExtensions.Icon>
+</ComboBox>
 
 # [**C#**](#tab/csharp)
 
-    new ComboBox()
-        .Style(Theme.ComboBox.Styles.Default)
-        .ControlExtensions
-        (
-            icon:
-                new SymbolIcon()
-                    .Symbol(Symbol.SolidStar)
-        )
+new ComboBox()
+    .Style(Theme.ComboBox.Styles.Default)
+    .ControlExtensions
+    (
+        icon:
+            new SymbolIcon()
+                .Symbol(Symbol.SolidStar)
+    )
 
 ***
 
@@ -69,33 +69,32 @@ It's control specific and for now, you can only use it with the ToggleButton con
 
 # [**XAML**](#tab/xaml)
 
-    <ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
-        <!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
-        <PathIcon Data="{StaticResource Icon_more_horizontal}" />
-
-        <!-- This is the alternate content - which is when the control state is CHECKED -->
-        <um:ControlExtensions.AlternateContent>
-            <PathIcon Data="{StaticResource Icon_more_vertical}" />
-        </um:ControlExtensions.AlternateContent>
-    </ToggleButton>
+<ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
+    <!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
+    <PathIcon Data="{StaticResource Icon_more_horizontal}" />
+    <!-- This is the alternate content - which is when the control state is CHECKED -->
+    <um:ControlExtensions.AlternateContent>
+        <PathIcon Data="{StaticResource Icon_more_vertical}" />
+    </um:ControlExtensions.AlternateContent>
+</ToggleButton>
 
 # [**C#**](#tab/csharp)
 
-    new ToggleButton()
-        .Style(Theme.ToggleButton.Styles.Icon)
-        // This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton)
-        .Content
-        (
+new ToggleButton()
+    .Style(Theme.ToggleButton.Styles.Icon)
+    // This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton)
+    .Content
+    (
+        new PathIcon()
+            .Data(StaticResource.Get<Geometry>("Icon_more_horizontal"))
+    )
+    // This is the alternate content - which is when the control state is CHECKED
+    .ControlExtensions
+    (
+        alternateContent:
             new PathIcon()
-                .Data(StaticResource.Get<Geometry>("Icon_more_horizontal"))
-        )
-        // This is the alternate content - which is when the control state is CHECKED
-        .ControlExtensions
-        (
-            alternateContent:
-                new PathIcon()
-                    .Data(StaticResource.Get<Geometry>("Icon_more_vertical"))
-        )
+                .Data(StaticResource.Get<Geometry>("Icon_more_vertical"))
+    )
 
 ***
 
@@ -149,58 +148,58 @@ Applying the surface tint for elevated controls is optional and must be explicit
 
 # [**XAML**](#tab/xaml)
 
-    <StackPanel Spacing="8">
-        <Button Content="Elevation 0"
-                um:ControlExtensions.Elevation="0"
-                Style="{StaticResource MaterialElevatedButtonStyle}" />
-        <Button Content="Elevation 1"
-                um:ControlExtensions.Elevation="1"
-                Style="{StaticResource MaterialElevatedButtonStyle}" />
-        <Button Content="Elevation 2"
-                um:ControlExtensions.Elevation="2"
-                Style="{StaticResource MaterialElevatedButtonStyle}" />
-        <Button Content="Elevation 3"
-                um:ControlExtensions.Elevation="3"
-                Style="{StaticResource MaterialElevatedButtonStyle}" />
-        <Button Content="Elevation 4"
-                um:ControlExtensions.Elevation="4"
-                Style="{StaticResource MaterialElevatedButtonStyle}" />
-        <Button Content="Elevation 5"
-                um:ControlExtensions.Elevation="5"
-                Style="{StaticResource MaterialElevatedButtonStyle}" />
-    </StackPanel> 
+<StackPanel Spacing="8">
+    <Button Content="Elevation 0"
+            um:ControlExtensions.Elevation="0"
+            Style="{StaticResource MaterialElevatedButtonStyle}" />
+    <Button Content="Elevation 1"
+            um:ControlExtensions.Elevation="1"
+            Style="{StaticResource MaterialElevatedButtonStyle}" />
+    <Button Content="Elevation 2"
+            um:ControlExtensions.Elevation="2"
+            Style="{StaticResource MaterialElevatedButtonStyle}" />
+    <Button Content="Elevation 3"
+            um:ControlExtensions.Elevation="3"
+            Style="{StaticResource MaterialElevatedButtonStyle}" />
+    <Button Content="Elevation 4"
+            um:ControlExtensions.Elevation="4"
+            Style="{StaticResource MaterialElevatedButtonStyle}" />
+    <Button Content="Elevation 5"
+            um:ControlExtensions.Elevation="5"
+            Style="{StaticResource MaterialElevatedButtonStyle}" />
+</StackPanel> 
 
 
 # [**C#**](#tab/csharp)
 
-    new StackPanel()
-        .Spacing(8)
-        .Children(
-            new Button()
-                .Content("Elevation 0")
-                .ControlExtensions(elevation: 0)
-                .Style(Theme.Button.Styles.Elevated),
-            new Button()
-                .Content("Elevation 1")
-                .ControlExtensions(elevation: 1)
-                .Style(Theme.Button.Styles.Elevated),
-            new Button()
-                .Content("Elevation 2")
-                .ControlExtensions(elevation: 2)
-                .Style(Theme.Button.Styles.Elevated),
-            new Button()
-                .Content("Elevation 3")
-                .ControlExtensions(elevation: 3)
-                .Style(Theme.Button.Styles.Elevated),
-            new Button()
-                .Content("Elevation 4")
-                .ControlExtensions(elevation: 4)
-                .Style(Theme.Button.Styles.Elevated),
-            new Button()
-                .Content("Elevation 5")
-                .ControlExtensions(elevation: 5)
-                .Style(Theme.Button.Styles.Elevated)
-        )
+new StackPanel()
+    .Spacing(8)
+    .Children(
+        new Button()
+            .Content("Elevation 0")
+            .ControlExtensions(elevation: 0)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 1")
+            .ControlExtensions(elevation: 1)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 2")
+            .ControlExtensions(elevation: 2)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 3")
+            .ControlExtensions(elevation: 3)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 4")
+            .ControlExtensions(elevation: 4)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 5")
+            .ControlExtensions(elevation: 5)
+            .Style(Theme.Button.Styles.Elevated)
+    )
 
 
 ***
diff --git a/doc/material-getting-started.md b/doc/material-getting-started.md
index 66df0985e..c22650eb4 100644
--- a/doc/material-getting-started.md
+++ b/doc/material-getting-started.md
@@ -47,27 +47,26 @@ Initialization of the Uno.Material resources is handled by the specialized `Mate
 
 # [**XAML**](#tab/xaml)
 
-    <ResourceDictionary>
-        <ResourceDictionary.MergedDictionaries>
-
-            <!-- Load Uno.Material resources -->
-            <MaterialTheme xmlns="using:Uno.Material" />
-
-        </ResourceDictionary.MergedDictionaries>
-    </ResourceDictionary>
+<ResourceDictionary>
+    <ResourceDictionary.MergedDictionaries>
+        <!-- Load Uno.Material resources -->
+        <MaterialTheme xmlns="using:Uno.Material" />
+    </ResourceDictionary.MergedDictionaries>
+</ResourceDictionary>
 
 # [**C#**](#tab/csharp)
-    using Uno.Material;
 
-    public sealed class AppResources : ResourceDictionary
+using Uno.Material;
+
+public sealed class AppResources : ResourceDictionary
+{
+    public AppResources()
     {
-        public AppResources()
-        {
-            // Load Uno.Material resources
-            this.Build(r => r.Merged(
-                new MaterialTheme()));
-        }
+        // Load Uno.Material resources
+        this.Build(r => r.Merged(
+            new MaterialTheme()));
     }
+}
 
 ***
 
@@ -130,174 +129,155 @@ Use this when you want to specify MANUALLY each colors.
 3. Replace the content with:
 # [**XAML**](#tab/xaml)
 
-    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-        <ResourceDictionary.ThemeDictionaries>
-
-            <!-- Light Theme -->
-            <ResourceDictionary x:Key="Light">
-                <!-- Primary -->
-                <Color x:Key="PrimaryColor">#6750A4</Color>
-                <Color x:Key="PrimaryInverseColor">#D0BCFF</Color>
-                <Color x:Key="OnPrimaryColor">#FFFFFF</Color>
-                <Color x:Key="PrimaryContainerColor">#EADDFF</Color>
-                <Color x:Key="OnPrimaryContainerColor">#21005E</Color>
-
-                <!-- Primary Variant Legacy Colors -->
-                <Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
-                <Color x:Key="PrimaryVariantLightColor">#B6A8FB</Color>
-
-                <!-- Secondary -->
-                <Color x:Key="SecondaryColor">#625B71</Color>
-                <Color x:Key="OnSecondaryColor">#FFFFFF</Color>
-                <Color x:Key="SecondaryContainerColor">#E5DFF9</Color>
-                <Color x:Key="OnSecondaryContainerColor">#1B192C</Color>
-
-                <!-- Secondary Variant Legacy Colors -->
-                <Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
-                <Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
-
-                <!-- Tertiary -->
-                <Color x:Key="TertiaryColor">#7D5260</Color>
-                <Color x:Key="OnTertiaryColor">#FFFFFF</Color>
-                <Color x:Key="TertiaryContainerColor">#FFD8E4</Color>
-                <Color x:Key="OnTertiaryContainerColor">#370B1E</Color>
-
-                <!-- Error -->
-                <Color x:Key="ErrorColor">#B3261E</Color>
-                <Color x:Key="OnErrorColor">#FFFFFF</Color>
-                <Color x:Key="ErrorContainerColor">#F9DEDC</Color>
-                <Color x:Key="OnErrorContainerColor">#370B1E</Color>
-
-                <!-- Background -->
-                <Color x:Key="BackgroundColor">#FFFBFE</Color>
-                <Color x:Key="OnBackgroundColor">#1C1B1F</Color>
-
-                <!-- Surface -->
-                <Color x:Key="SurfaceColor">#FFFBFE</Color>
-                <Color x:Key="OnSurfaceColor">#1C1B1F</Color>
-                <Color x:Key="SurfaceVariantColor">#E7E0EC</Color>
-                <Color x:Key="OnSurfaceVariantColor">#A5A0AC</Color>
-                <Color x:Key="SurfaceInverseColor">#313033</Color>
-                <Color x:Key="OnSurfaceInverseColor">#F4EFF4</Color>
-                <Color x:Key="SurfaceTintColor">#5946D2</Color>
-
-                <!-- Outline -->
-                <Color x:Key="OutlineColor">#79747E</Color>
-                <Color x:Key="OutlineVariantColor">#C9C5D0</Color>
-            </ResourceDictionary>
-
-            <!-- Dark Theme -->
-            <ResourceDictionary x:Key="Dark">
-                <!-- Primary -->
-                <Color x:Key="PrimaryColor">#D0BCFF</Color>
-                <Color x:Key="OnPrimaryColor">#371E73</Color>
-                <Color x:Key="PrimaryContainerColor">#4F378B</Color>
-                <Color x:Key="OnPrimaryContainerColor">#EADDFF</Color>
-                <Color x:Key="PrimaryInverseColor">#6750A4</Color>
-
-                <!-- Primary Variant Legacy Colors -->
-                <Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
-                <Color x:Key="PrimaryVariantLightColor">#D4CBFC</Color>
-
-                <!-- Secondary -->
-                <Color x:Key="SecondaryColor">#CCC2DC</Color>
-                <Color x:Key="OnSecondaryColor">#332D41</Color>
-                <Color x:Key="SecondaryContainerColor">#474459</Color>
-                <Color x:Key="OnSecondaryContainerColor">#E5DFF9</Color>
-
-                <!-- Secondary Variant Legacy Colors -->
-                <Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
-                <Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
-
-                <!-- Tertiary -->
-                <Color x:Key="TertiaryColor">#EFB8C8</Color>
-                <Color x:Key="OnTertiaryColor">#492532</Color>
-                <Color x:Key="TertiaryContainerColor">#633B48</Color>
-                <Color x:Key="OnTertiaryContainerColor">#FFD8E4</Color>
-
-                <!-- Error -->
-                <Color x:Key="ErrorColor">#F2B8B5</Color>
-                <Color x:Key="OnErrorColor">#601410</Color>
-                <Color x:Key="ErrorContainerColor">#8C1D18</Color>
-                <Color x:Key="OnErrorContainerColor">#F9DEDC</Color>
-
-                <!-- Background -->
-                <Color x:Key="BackgroundColor">#1C1B1F</Color>
-                <Color x:Key="OnBackgroundColor">#E6E1E5</Color>
-
-                <!-- Surface -->
-                <Color x:Key="SurfaceColor">#1C1B1F</Color>
-                <Color x:Key="OnSurfaceColor">#E6E1E5</Color>
-                <Color x:Key="SurfaceVariantColor">#49454F</Color>
-                <Color x:Key="OnSurfaceVariantColor">#CAC4D0</Color>
-                <Color x:Key="SurfaceInverseColor">#E6E1E5</Color>
-                <Color x:Key="OnSurfaceInverseColor">#313033</Color>
-                <Color x:Key="SurfaceTintColor">#C7BFFF</Color>
-
-                <!-- Outline -->
-                <Color x:Key="OutlineColor">#938F99</Color>
-                <Color x:Key="OutlineVariantColor">#57545D</Color>
-            </ResourceDictionary>
-
-        </ResourceDictionary.ThemeDictionaries>
-    </ResourceDictionary>
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ResourceDictionary.ThemeDictionaries>
+        <!-- Light Theme -->
+        <ResourceDictionary x:Key="Light">
+            <!-- Primary -->
+            <Color x:Key="PrimaryColor">#6750A4</Color>
+            <Color x:Key="PrimaryInverseColor">#D0BCFF</Color>
+            <Color x:Key="OnPrimaryColor">#FFFFFF</Color>
+            <Color x:Key="PrimaryContainerColor">#EADDFF</Color>
+            <Color x:Key="OnPrimaryContainerColor">#21005E</Color>
+            <!-- Primary Variant Legacy Colors -->
+            <Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
+            <Color x:Key="PrimaryVariantLightColor">#B6A8FB</Color>
+            <!-- Secondary -->
+            <Color x:Key="SecondaryColor">#625B71</Color>
+            <Color x:Key="OnSecondaryColor">#FFFFFF</Color>
+            <Color x:Key="SecondaryContainerColor">#E5DFF9</Color>
+            <Color x:Key="OnSecondaryContainerColor">#1B192C</Color>
+            <!-- Secondary Variant Legacy Colors -->
+            <Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
+            <Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
+            <!-- Tertiary -->
+            <Color x:Key="TertiaryColor">#7D5260</Color>
+            <Color x:Key="OnTertiaryColor">#FFFFFF</Color>
+            <Color x:Key="TertiaryContainerColor">#FFD8E4</Color>
+            <Color x:Key="OnTertiaryContainerColor">#370B1E</Color>
+            <!-- Error -->
+            <Color x:Key="ErrorColor">#B3261E</Color>
+            <Color x:Key="OnErrorColor">#FFFFFF</Color>
+            <Color x:Key="ErrorContainerColor">#F9DEDC</Color>
+            <Color x:Key="OnErrorContainerColor">#370B1E</Color>
+            <!-- Background -->
+            <Color x:Key="BackgroundColor">#FFFBFE</Color>
+            <Color x:Key="OnBackgroundColor">#1C1B1F</Color>
+            <!-- Surface -->
+            <Color x:Key="SurfaceColor">#FFFBFE</Color>
+            <Color x:Key="OnSurfaceColor">#1C1B1F</Color>
+            <Color x:Key="SurfaceVariantColor">#E7E0EC</Color>
+            <Color x:Key="OnSurfaceVariantColor">#A5A0AC</Color>
+            <Color x:Key="SurfaceInverseColor">#313033</Color>
+            <Color x:Key="OnSurfaceInverseColor">#F4EFF4</Color>
+            <Color x:Key="SurfaceTintColor">#5946D2</Color>
+            <!-- Outline -->
+            <Color x:Key="OutlineColor">#79747E</Color>
+            <Color x:Key="OutlineVariantColor">#C9C5D0</Color>
+        </ResourceDictionary>
+        <!-- Dark Theme -->
+        <ResourceDictionary x:Key="Dark">
+            <!-- Primary -->
+            <Color x:Key="PrimaryColor">#D0BCFF</Color>
+            <Color x:Key="OnPrimaryColor">#371E73</Color>
+            <Color x:Key="PrimaryContainerColor">#4F378B</Color>
+            <Color x:Key="OnPrimaryContainerColor">#EADDFF</Color>
+            <Color x:Key="PrimaryInverseColor">#6750A4</Color>
+            <!-- Primary Variant Legacy Colors -->
+            <Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
+            <Color x:Key="PrimaryVariantLightColor">#D4CBFC</Color>
+            <!-- Secondary -->
+            <Color x:Key="SecondaryColor">#CCC2DC</Color>
+            <Color x:Key="OnSecondaryColor">#332D41</Color>
+            <Color x:Key="SecondaryContainerColor">#474459</Color>
+            <Color x:Key="OnSecondaryContainerColor">#E5DFF9</Color>
+            <!-- Secondary Variant Legacy Colors -->
+            <Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
+            <Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
+            <!-- Tertiary -->
+            <Color x:Key="TertiaryColor">#EFB8C8</Color>
+            <Color x:Key="OnTertiaryColor">#492532</Color>
+            <Color x:Key="TertiaryContainerColor">#633B48</Color>
+            <Color x:Key="OnTertiaryContainerColor">#FFD8E4</Color>
+            <!-- Error -->
+            <Color x:Key="ErrorColor">#F2B8B5</Color>
+            <Color x:Key="OnErrorColor">#601410</Color>
+            <Color x:Key="ErrorContainerColor">#8C1D18</Color>
+            <Color x:Key="OnErrorContainerColor">#F9DEDC</Color>
+            <!-- Background -->
+            <Color x:Key="BackgroundColor">#1C1B1F</Color>
+            <Color x:Key="OnBackgroundColor">#E6E1E5</Color>
+            <!-- Surface -->
+            <Color x:Key="SurfaceColor">#1C1B1F</Color>
+            <Color x:Key="OnSurfaceColor">#E6E1E5</Color>
+            <Color x:Key="SurfaceVariantColor">#49454F</Color>
+            <Color x:Key="OnSurfaceVariantColor">#CAC4D0</Color>
+            <Color x:Key="SurfaceInverseColor">#E6E1E5</Color>
+            <Color x:Key="OnSurfaceInverseColor">#313033</Color>
+            <Color x:Key="SurfaceTintColor">#C7BFFF</Color>
+            <!-- Outline -->
+            <Color x:Key="OutlineColor">#938F99</Color>
+            <Color x:Key="OutlineVariantColor">#57545D</Color>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+</ResourceDictionary>
 
 # [**C#**](#tab/csharp)
 
-    namespace PROJECT_NAME.Styles;
+namespace PROJECT_NAME.Styles;
 
-    public sealed partial class ColorPaletteOverride : ResourceDictionary
+public sealed partial class ColorPaletteOverride : ResourceDictionary
+{
+    public ColorPaletteOverride()
     {
-        public ColorPaletteOverride()
-        {
-            this.Build
-            (
-                r => r
-                    .Add(Uno.Themes.Markup.Theme.Colors.Primary.Default, light: "#6750A4", dark: "#D0BCFF")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Primary.Inverse, light: "#D0BCFF", dark: "#6750A4")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Primary.Container, light: "#EADDFF", dark: "#4F378B")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Default, light: "#FFFFFF", dark: "#371E73")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Container, light: "#21005E", dark: "#EADDFF")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Default, light: "#625B71", dark: "#CCC2DC")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Container, light: "#E5DFF9", dark: "#474459")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Default, light: "#FFFFFF", dark: "#332D41")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Container, light: "#1B192C", dark: "#E5DFF9")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Default, light: "#7D5260", dark: "#EFB8C8")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Container, light: "#FFD8E4", dark: "#633B48")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Default, light: "#FFFFFF", dark: "#492532")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Container, light: "#370B1E", dark: "#FFD8E4")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Error.Default, light: "#B3261E", dark: "#F2B8B5")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Error.Container, light: "#F9DEDC", dark: "#8C1D18")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnError.Default, light: "#FFFFFF", dark: "#601410")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnError.Container, light: "#370B1E", dark: "#F9DEDC")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Background.Default, light: "#FFFBFE", dark: "#1C1B1F")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnBackground.Default, light: "#1C1B1F", dark: "#E6E1E5")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Default, light: "#FFFBFE", dark: "#1C1B1F")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Variant, light: "#E7E0EC", dark: "#49454F")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Inverse, light: "#313033", dark: "#E6E1E5")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Tint, light: "#5946D2", dark: "#C7BFFF")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Default, light: "#1C1B1F", dark: "#E6E1E5")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Variant, light: "#A5A0AC", dark: "#CAC4D0")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Inverse, light: "#F4EFF4", dark: "#313033")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Outline.Default, light: "#79747E", dark: "#938F99")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Outline.Variant, light: "#C9C5D0", dark: "#57545D")		
-            );
-        }
+        this.Build
+        (
+            r => r
+                .Add(Uno.Themes.Markup.Theme.Colors.Primary.Default, light: "#6750A4", dark: "#D0BCFF")
+                .Add(Uno.Themes.Markup.Theme.Colors.Primary.Inverse, light: "#D0BCFF", dark: "#6750A4")
+                .Add(Uno.Themes.Markup.Theme.Colors.Primary.Container, light: "#EADDFF", dark: "#4F378B")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Default, light: "#FFFFFF", dark: "#371E73")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Container, light: "#21005E", dark: "#EADDFF")
+                .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Default, light: "#625B71", dark: "#CCC2DC")
+                .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Container, light: "#E5DFF9", dark: "#474459")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Default, light: "#FFFFFF", dark: "#332D41")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Container, light: "#1B192C", dark: "#E5DFF9")
+                .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Default, light: "#7D5260", dark: "#EFB8C8")
+                .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Container, light: "#FFD8E4", dark: "#633B48")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Default, light: "#FFFFFF", dark: "#492532")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Container, light: "#370B1E", dark: "#FFD8E4")
+                .Add(Uno.Themes.Markup.Theme.Colors.Error.Default, light: "#B3261E", dark: "#F2B8B5")
+                .Add(Uno.Themes.Markup.Theme.Colors.Error.Container, light: "#F9DEDC", dark: "#8C1D18")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnError.Default, light: "#FFFFFF", dark: "#601410")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnError.Container, light: "#370B1E", dark: "#F9DEDC")
+                .Add(Uno.Themes.Markup.Theme.Colors.Background.Default, light: "#FFFBFE", dark: "#1C1B1F")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnBackground.Default, light: "#1C1B1F", dark: "#E6E1E5")
+                .Add(Uno.Themes.Markup.Theme.Colors.Surface.Default, light: "#FFFBFE", dark: "#1C1B1F")
+                .Add(Uno.Themes.Markup.Theme.Colors.Surface.Variant, light: "#E7E0EC", dark: "#49454F")
+                .Add(Uno.Themes.Markup.Theme.Colors.Surface.Inverse, light: "#313033", dark: "#E6E1E5")
+                .Add(Uno.Themes.Markup.Theme.Colors.Surface.Tint, light: "#5946D2", dark: "#C7BFFF")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Default, light: "#1C1B1F", dark: "#E6E1E5")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Variant, light: "#A5A0AC", dark: "#CAC4D0")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Inverse, light: "#F4EFF4", dark: "#313033")
+                .Add(Uno.Themes.Markup.Theme.Colors.Outline.Default, light: "#79747E", dark: "#938F99")
+                .Add(Uno.Themes.Markup.Theme.Colors.Outline.Variant, light: "#C9C5D0", dark: "#57545D")		
+        );
     }
+}
 
 ***
 4. In `AppResources` file, update `MaterialTheme` with the override from the previous steps:
 # [**XAML**](#tab/xaml)
 
-    <MaterialTheme xmlns="using:Uno.Material"
-                   ColorOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialColorsOverride.xaml" />
+<MaterialTheme xmlns="using:Uno.Material"
+                ColorOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialColorsOverride.xaml" />
 
 # [**C#**](#tab/csharp)
 
-    this.Build(r => r.Merged(
-			new MaterialTheme()
-				.ColorOverrideDictionary(new Styles.ColorPaletteOverride())));
+this.Build(r => r.Merged(
+        new MaterialTheme()
+            .ColorOverrideDictionary(new Styles.ColorPaletteOverride())));
 
 ***
 ### Change Default Font
@@ -312,43 +292,41 @@ If you would like Uno.Material to use a different font, you can override the def
 4. Assuming the font file has been placed in the **App Code Library** within, for example, a directory such as `Assets/Fonts/MyCustomFont.ttf`, your override file would look like the following:
 # [**XAML**](#tab/xaml)
 
-    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-
-        <FontFamily x:Key="MaterialLightFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont</FontFamily>
-        <FontFamily x:Key="MaterialMediumFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont</FontFamily>
-        <FontFamily x:Key="MaterialRegularFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont</FontFamily>
-
-    </ResourceDictionary>
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <FontFamily x:Key="MaterialLightFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont</FontFamily>
+    <FontFamily x:Key="MaterialMediumFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont</FontFamily>
+    <FontFamily x:Key="MaterialRegularFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont</FontFamily>
+</ResourceDictionary>
 
 # [**C#**](#tab/csharp)
 
-    namespace PROJECT_NAME.Styles;
+namespace PROJECT_NAME.Styles;
 
-    public sealed class MaterialFontsOverride : ResourceDictionary
+public sealed class MaterialFontsOverride : ResourceDictionary
+{
+    public MaterialFontsOverride()
     {
-        public MaterialFontsOverride()
-        {
-            this.Build(r => r
-                .Add<FontFamily>("MaterialLightFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont")
-                .Add<FontFamily>("MaterialMediumFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont")
-                .Add<FontFamily>("MaterialRegularFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont"));
-        }
+        this.Build(r => r
+            .Add<FontFamily>("MaterialLightFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont")
+            .Add<FontFamily>("MaterialMediumFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont")
+            .Add<FontFamily>("MaterialRegularFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont"));
     }
+}
 
 ***
 
 5. In `AppResources` file, update `MaterialTheme` with the override from the previous steps:
 # [**XAML**](#tab/xaml)
 
-    <MaterialTheme xmlns="using:Uno.Material"
-                   FontOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialFontsOverride.xaml" />
+<MaterialTheme xmlns="using:Uno.Material"
+                FontOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialFontsOverride.xaml" />
 
 # [**C#**](#tab/csharp)
 
-    this.Build(r => r.Merged(
-        new MaterialTheme()
-            .FontOverrideDictionary(new Styles.MaterialFontsOverride())));
+this.Build(r => r.Merged(
+    new MaterialTheme()
+        .FontOverrideDictionary(new Styles.MaterialFontsOverride())));
 
 ***
 

From be370d8fde42bb62eff1f4e1a76b0ce1c402c391 Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Mon, 18 Dec 2023 13:08:33 +0000
Subject: [PATCH 6/8] chore: tweaks

---
 doc/material-controls-extensions.md | 194 ++++++++--------
 doc/material-getting-started.md     | 339 ++++++++++++++--------------
 2 files changed, 265 insertions(+), 268 deletions(-)

diff --git a/doc/material-controls-extensions.md b/doc/material-controls-extensions.md
index 645d09e2a..2d49f0a24 100644
--- a/doc/material-controls-extensions.md
+++ b/doc/material-controls-extensions.md
@@ -17,23 +17,23 @@ Here are supported control with samples:
 
 # [**XAML**](#tab/xaml)
 
-<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}">
-    <um:ControlExtensions.Icon>
-        <SymbolIcon Symbol="SolidStar" />
-    </um:ControlExtensions.Icon>
-</ComboBox>
+    <TextBox Style="{StaticResource MaterialFilledTextBoxStyle}">
+        <um:ControlExtensions.Icon>
+            <SymbolIcon Symbol="SolidStar" />
+        </um:ControlExtensions.Icon>
+    </ComboBox>
 
 
 # [**C#**](#tab/csharp)
 
-new TextBox()
-    .Style(Theme.TextBox.Styles.Filled)
-    .ControlExtensions
-    (
-        icon:
-            new SymbolIcon()
-                .Symbol(Symbol.SolidStar)
-    )
+    new TextBox()
+        .Style(Theme.TextBox.Styles.Filled)
+        .ControlExtensions
+        (
+            icon:
+                new SymbolIcon()
+                    .Symbol(Symbol.SolidStar)
+        )
 
 ***
 
@@ -41,22 +41,22 @@ new TextBox()
 
 # [**XAML**](#tab/xaml)
 
-<ComboBox Style="{StaticResource MaterialComboBoxStyle}">
-    <um:ControlExtensions.Icon>
-        <SymbolIcon Symbol="SolidStar" />
-    </um:ControlExtensions.Icon>
-</ComboBox>
+    <ComboBox Style="{StaticResource MaterialComboBoxStyle}">
+        <um:ControlExtensions.Icon>
+            <SymbolIcon Symbol="SolidStar" />
+        </um:ControlExtensions.Icon>
+    </ComboBox>
 
 # [**C#**](#tab/csharp)
 
-new ComboBox()
-    .Style(Theme.ComboBox.Styles.Default)
-    .ControlExtensions
-    (
-        icon:
-            new SymbolIcon()
-                .Symbol(Symbol.SolidStar)
-    )
+    new ComboBox()
+        .Style(Theme.ComboBox.Styles.Default)
+        .ControlExtensions
+        (
+            icon:
+                new SymbolIcon()
+                    .Symbol(Symbol.SolidStar)
+        )
 
 ***
 
@@ -69,32 +69,32 @@ It's control specific and for now, you can only use it with the ToggleButton con
 
 # [**XAML**](#tab/xaml)
 
-<ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
-    <!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
-    <PathIcon Data="{StaticResource Icon_more_horizontal}" />
-    <!-- This is the alternate content - which is when the control state is CHECKED -->
-    <um:ControlExtensions.AlternateContent>
-        <PathIcon Data="{StaticResource Icon_more_vertical}" />
-    </um:ControlExtensions.AlternateContent>
-</ToggleButton>
+    <ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
+        <!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
+        <PathIcon Data="{StaticResource Icon_more_horizontal}" />
+        <!-- This is the alternate content - which is when the control state is CHECKED -->
+        <um:ControlExtensions.AlternateContent>
+            <PathIcon Data="{StaticResource Icon_more_vertical}" />
+        </um:ControlExtensions.AlternateContent>
+    </ToggleButton>
 
 # [**C#**](#tab/csharp)
 
-new ToggleButton()
-    .Style(Theme.ToggleButton.Styles.Icon)
-    // This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton)
-    .Content
-    (
-        new PathIcon()
-            .Data(StaticResource.Get<Geometry>("Icon_more_horizontal"))
-    )
-    // This is the alternate content - which is when the control state is CHECKED
-    .ControlExtensions
-    (
-        alternateContent:
+    new ToggleButton()
+        .Style(Theme.ToggleButton.Styles.Icon)
+        // This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton)
+        .Content
+        (
             new PathIcon()
-                .Data(StaticResource.Get<Geometry>("Icon_more_vertical"))
-    )
+                .Data(StaticResource.Get<Geometry>("Icon_more_horizontal"))
+        )
+        // This is the alternate content - which is when the control state is CHECKED
+        .ControlExtensions
+        (
+            alternateContent:
+                new PathIcon()
+                    .Data(StaticResource.Get<Geometry>("Icon_more_vertical"))
+        )
 
 ***
 
@@ -148,60 +148,58 @@ Applying the surface tint for elevated controls is optional and must be explicit
 
 # [**XAML**](#tab/xaml)
 
-<StackPanel Spacing="8">
-    <Button Content="Elevation 0"
-            um:ControlExtensions.Elevation="0"
-            Style="{StaticResource MaterialElevatedButtonStyle}" />
-    <Button Content="Elevation 1"
-            um:ControlExtensions.Elevation="1"
-            Style="{StaticResource MaterialElevatedButtonStyle}" />
-    <Button Content="Elevation 2"
-            um:ControlExtensions.Elevation="2"
-            Style="{StaticResource MaterialElevatedButtonStyle}" />
-    <Button Content="Elevation 3"
-            um:ControlExtensions.Elevation="3"
-            Style="{StaticResource MaterialElevatedButtonStyle}" />
-    <Button Content="Elevation 4"
-            um:ControlExtensions.Elevation="4"
-            Style="{StaticResource MaterialElevatedButtonStyle}" />
-    <Button Content="Elevation 5"
-            um:ControlExtensions.Elevation="5"
-            Style="{StaticResource MaterialElevatedButtonStyle}" />
-</StackPanel> 
+    <StackPanel Spacing="8">
+        <Button Content="Elevation 0"
+                um:ControlExtensions.Elevation="0"
+                Style="{StaticResource MaterialElevatedButtonStyle}" />
+        <Button Content="Elevation 1"
+                um:ControlExtensions.Elevation="1"
+                Style="{StaticResource MaterialElevatedButtonStyle}" />
+        <Button Content="Elevation 2"
+                um:ControlExtensions.Elevation="2"
+                Style="{StaticResource MaterialElevatedButtonStyle}" />
+        <Button Content="Elevation 3"
+                um:ControlExtensions.Elevation="3"
+                Style="{StaticResource MaterialElevatedButtonStyle}" />
+        <Button Content="Elevation 4"
+                um:ControlExtensions.Elevation="4"
+                Style="{StaticResource MaterialElevatedButtonStyle}" />
+        <Button Content="Elevation 5"
+                um:ControlExtensions.Elevation="5"
+                Style="{StaticResource MaterialElevatedButtonStyle}" />
+    </StackPanel> 
 
 
 # [**C#**](#tab/csharp)
 
-new StackPanel()
-    .Spacing(8)
-    .Children(
-        new Button()
-            .Content("Elevation 0")
-            .ControlExtensions(elevation: 0)
-            .Style(Theme.Button.Styles.Elevated),
-        new Button()
-            .Content("Elevation 1")
-            .ControlExtensions(elevation: 1)
-            .Style(Theme.Button.Styles.Elevated),
-        new Button()
-            .Content("Elevation 2")
-            .ControlExtensions(elevation: 2)
-            .Style(Theme.Button.Styles.Elevated),
-        new Button()
-            .Content("Elevation 3")
-            .ControlExtensions(elevation: 3)
-            .Style(Theme.Button.Styles.Elevated),
-        new Button()
-            .Content("Elevation 4")
-            .ControlExtensions(elevation: 4)
-            .Style(Theme.Button.Styles.Elevated),
-        new Button()
-            .Content("Elevation 5")
-            .ControlExtensions(elevation: 5)
-            .Style(Theme.Button.Styles.Elevated)
-    )
-
-
+    new StackPanel()
+        .Spacing(8)
+        .Children(
+            new Button()
+                .Content("Elevation 0")
+                .ControlExtensions(elevation: 0)
+                .Style(Theme.Button.Styles.Elevated),
+            new Button()
+                .Content("Elevation 1")
+                .ControlExtensions(elevation: 1)
+                .Style(Theme.Button.Styles.Elevated),
+            new Button()
+                .Content("Elevation 2")
+                .ControlExtensions(elevation: 2)
+                .Style(Theme.Button.Styles.Elevated),
+            new Button()
+                .Content("Elevation 3")
+                .ControlExtensions(elevation: 3)
+                .Style(Theme.Button.Styles.Elevated),
+            new Button()
+                .Content("Elevation 4")
+                .ControlExtensions(elevation: 4)
+                .Style(Theme.Button.Styles.Elevated),
+            new Button()
+                .Content("Elevation 5")
+                .ControlExtensions(elevation: 5)
+                .Style(Theme.Button.Styles.Elevated)
+        )
 ***
 
 The above code will produce the following result:
diff --git a/doc/material-getting-started.md b/doc/material-getting-started.md
index c22650eb4..a3ae32665 100644
--- a/doc/material-getting-started.md
+++ b/doc/material-getting-started.md
@@ -47,26 +47,26 @@ Initialization of the Uno.Material resources is handled by the specialized `Mate
 
 # [**XAML**](#tab/xaml)
 
-<ResourceDictionary>
-    <ResourceDictionary.MergedDictionaries>
-        <!-- Load Uno.Material resources -->
-        <MaterialTheme xmlns="using:Uno.Material" />
-    </ResourceDictionary.MergedDictionaries>
-</ResourceDictionary>
+    <ResourceDictionary>
+        <ResourceDictionary.MergedDictionaries>
+            <!-- Load Uno.Material resources -->
+            <MaterialTheme xmlns="using:Uno.Material" />
+        </ResourceDictionary.MergedDictionaries>
+    </ResourceDictionary>
 
 # [**C#**](#tab/csharp)
 
-using Uno.Material;
+    using Uno.Material;
 
-public sealed class AppResources : ResourceDictionary
-{
-    public AppResources()
+    public sealed class AppResources : ResourceDictionary
     {
-        // Load Uno.Material resources
-        this.Build(r => r.Merged(
-            new MaterialTheme()));
+        public AppResources()
+        {
+            // Load Uno.Material resources
+            this.Build(r => r.Merged(
+                new MaterialTheme()));
+        }
     }
-}
 
 ***
 
@@ -129,155 +129,154 @@ Use this when you want to specify MANUALLY each colors.
 3. Replace the content with:
 # [**XAML**](#tab/xaml)
 
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ResourceDictionary.ThemeDictionaries>
-        <!-- Light Theme -->
-        <ResourceDictionary x:Key="Light">
-            <!-- Primary -->
-            <Color x:Key="PrimaryColor">#6750A4</Color>
-            <Color x:Key="PrimaryInverseColor">#D0BCFF</Color>
-            <Color x:Key="OnPrimaryColor">#FFFFFF</Color>
-            <Color x:Key="PrimaryContainerColor">#EADDFF</Color>
-            <Color x:Key="OnPrimaryContainerColor">#21005E</Color>
-            <!-- Primary Variant Legacy Colors -->
-            <Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
-            <Color x:Key="PrimaryVariantLightColor">#B6A8FB</Color>
-            <!-- Secondary -->
-            <Color x:Key="SecondaryColor">#625B71</Color>
-            <Color x:Key="OnSecondaryColor">#FFFFFF</Color>
-            <Color x:Key="SecondaryContainerColor">#E5DFF9</Color>
-            <Color x:Key="OnSecondaryContainerColor">#1B192C</Color>
-            <!-- Secondary Variant Legacy Colors -->
-            <Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
-            <Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
-            <!-- Tertiary -->
-            <Color x:Key="TertiaryColor">#7D5260</Color>
-            <Color x:Key="OnTertiaryColor">#FFFFFF</Color>
-            <Color x:Key="TertiaryContainerColor">#FFD8E4</Color>
-            <Color x:Key="OnTertiaryContainerColor">#370B1E</Color>
-            <!-- Error -->
-            <Color x:Key="ErrorColor">#B3261E</Color>
-            <Color x:Key="OnErrorColor">#FFFFFF</Color>
-            <Color x:Key="ErrorContainerColor">#F9DEDC</Color>
-            <Color x:Key="OnErrorContainerColor">#370B1E</Color>
-            <!-- Background -->
-            <Color x:Key="BackgroundColor">#FFFBFE</Color>
-            <Color x:Key="OnBackgroundColor">#1C1B1F</Color>
-            <!-- Surface -->
-            <Color x:Key="SurfaceColor">#FFFBFE</Color>
-            <Color x:Key="OnSurfaceColor">#1C1B1F</Color>
-            <Color x:Key="SurfaceVariantColor">#E7E0EC</Color>
-            <Color x:Key="OnSurfaceVariantColor">#A5A0AC</Color>
-            <Color x:Key="SurfaceInverseColor">#313033</Color>
-            <Color x:Key="OnSurfaceInverseColor">#F4EFF4</Color>
-            <Color x:Key="SurfaceTintColor">#5946D2</Color>
-            <!-- Outline -->
-            <Color x:Key="OutlineColor">#79747E</Color>
-            <Color x:Key="OutlineVariantColor">#C9C5D0</Color>
-        </ResourceDictionary>
-        <!-- Dark Theme -->
-        <ResourceDictionary x:Key="Dark">
-            <!-- Primary -->
-            <Color x:Key="PrimaryColor">#D0BCFF</Color>
-            <Color x:Key="OnPrimaryColor">#371E73</Color>
-            <Color x:Key="PrimaryContainerColor">#4F378B</Color>
-            <Color x:Key="OnPrimaryContainerColor">#EADDFF</Color>
-            <Color x:Key="PrimaryInverseColor">#6750A4</Color>
-            <!-- Primary Variant Legacy Colors -->
-            <Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
-            <Color x:Key="PrimaryVariantLightColor">#D4CBFC</Color>
-            <!-- Secondary -->
-            <Color x:Key="SecondaryColor">#CCC2DC</Color>
-            <Color x:Key="OnSecondaryColor">#332D41</Color>
-            <Color x:Key="SecondaryContainerColor">#474459</Color>
-            <Color x:Key="OnSecondaryContainerColor">#E5DFF9</Color>
-            <!-- Secondary Variant Legacy Colors -->
-            <Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
-            <Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
-            <!-- Tertiary -->
-            <Color x:Key="TertiaryColor">#EFB8C8</Color>
-            <Color x:Key="OnTertiaryColor">#492532</Color>
-            <Color x:Key="TertiaryContainerColor">#633B48</Color>
-            <Color x:Key="OnTertiaryContainerColor">#FFD8E4</Color>
-            <!-- Error -->
-            <Color x:Key="ErrorColor">#F2B8B5</Color>
-            <Color x:Key="OnErrorColor">#601410</Color>
-            <Color x:Key="ErrorContainerColor">#8C1D18</Color>
-            <Color x:Key="OnErrorContainerColor">#F9DEDC</Color>
-            <!-- Background -->
-            <Color x:Key="BackgroundColor">#1C1B1F</Color>
-            <Color x:Key="OnBackgroundColor">#E6E1E5</Color>
-            <!-- Surface -->
-            <Color x:Key="SurfaceColor">#1C1B1F</Color>
-            <Color x:Key="OnSurfaceColor">#E6E1E5</Color>
-            <Color x:Key="SurfaceVariantColor">#49454F</Color>
-            <Color x:Key="OnSurfaceVariantColor">#CAC4D0</Color>
-            <Color x:Key="SurfaceInverseColor">#E6E1E5</Color>
-            <Color x:Key="OnSurfaceInverseColor">#313033</Color>
-            <Color x:Key="SurfaceTintColor">#C7BFFF</Color>
-            <!-- Outline -->
-            <Color x:Key="OutlineColor">#938F99</Color>
-            <Color x:Key="OutlineVariantColor">#57545D</Color>
-        </ResourceDictionary>
-    </ResourceDictionary.ThemeDictionaries>
-</ResourceDictionary>
+    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+        <ResourceDictionary.ThemeDictionaries>
+            <!-- Light Theme -->
+            <ResourceDictionary x:Key="Light">
+                <!-- Primary -->
+                <Color x:Key="PrimaryColor">#6750A4</Color>
+                <Color x:Key="PrimaryInverseColor">#D0BCFF</Color>
+                <Color x:Key="OnPrimaryColor">#FFFFFF</Color>
+                <Color x:Key="PrimaryContainerColor">#EADDFF</Color>
+                <Color x:Key="OnPrimaryContainerColor">#21005E</Color>
+                <!-- Primary Variant Legacy Colors -->
+                <Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
+                <Color x:Key="PrimaryVariantLightColor">#B6A8FB</Color>
+                <!-- Secondary -->
+                <Color x:Key="SecondaryColor">#625B71</Color>
+                <Color x:Key="OnSecondaryColor">#FFFFFF</Color>
+                <Color x:Key="SecondaryContainerColor">#E5DFF9</Color>
+                <Color x:Key="OnSecondaryContainerColor">#1B192C</Color>
+                <!-- Secondary Variant Legacy Colors -->
+                <Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
+                <Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
+                <!-- Tertiary -->
+                <Color x:Key="TertiaryColor">#7D5260</Color>
+                <Color x:Key="OnTertiaryColor">#FFFFFF</Color>
+                <Color x:Key="TertiaryContainerColor">#FFD8E4</Color>
+                <Color x:Key="OnTertiaryContainerColor">#370B1E</Color>
+                <!-- Error -->
+                <Color x:Key="ErrorColor">#B3261E</Color>
+                <Color x:Key="OnErrorColor">#FFFFFF</Color>
+                <Color x:Key="ErrorContainerColor">#F9DEDC</Color>
+                <Color x:Key="OnErrorContainerColor">#370B1E</Color>
+                <!-- Background -->
+                <Color x:Key="BackgroundColor">#FFFBFE</Color>
+                <Color x:Key="OnBackgroundColor">#1C1B1F</Color>
+                <!-- Surface -->
+                <Color x:Key="SurfaceColor">#FFFBFE</Color>
+                <Color x:Key="OnSurfaceColor">#1C1B1F</Color>
+                <Color x:Key="SurfaceVariantColor">#E7E0EC</Color>
+                <Color x:Key="OnSurfaceVariantColor">#A5A0AC</Color>
+                <Color x:Key="SurfaceInverseColor">#313033</Color>
+                <Color x:Key="OnSurfaceInverseColor">#F4EFF4</Color>
+                <Color x:Key="SurfaceTintColor">#5946D2</Color>
+                <!-- Outline -->
+                <Color x:Key="OutlineColor">#79747E</Color>
+                <Color x:Key="OutlineVariantColor">#C9C5D0</Color>
+            </ResourceDictionary>
+            <!-- Dark Theme -->
+            <ResourceDictionary x:Key="Dark">
+                <!-- Primary -->
+                <Color x:Key="PrimaryColor">#D0BCFF</Color>
+                <Color x:Key="OnPrimaryColor">#371E73</Color>
+                <Color x:Key="PrimaryContainerColor">#4F378B</Color>
+                <Color x:Key="OnPrimaryContainerColor">#EADDFF</Color>
+                <Color x:Key="PrimaryInverseColor">#6750A4</Color>
+                <!-- Primary Variant Legacy Colors -->
+                <Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
+                <Color x:Key="PrimaryVariantLightColor">#D4CBFC</Color>
+                <!-- Secondary -->
+                <Color x:Key="SecondaryColor">#CCC2DC</Color>
+                <Color x:Key="OnSecondaryColor">#332D41</Color>
+                <Color x:Key="SecondaryContainerColor">#474459</Color>
+                <Color x:Key="OnSecondaryContainerColor">#E5DFF9</Color>
+                <!-- Secondary Variant Legacy Colors -->
+                <Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
+                <Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
+                <!-- Tertiary -->
+                <Color x:Key="TertiaryColor">#EFB8C8</Color>
+                <Color x:Key="OnTertiaryColor">#492532</Color>
+                <Color x:Key="TertiaryContainerColor">#633B48</Color>
+                <Color x:Key="OnTertiaryContainerColor">#FFD8E4</Color>
+                <!-- Error -->
+                <Color x:Key="ErrorColor">#F2B8B5</Color>
+                <Color x:Key="OnErrorColor">#601410</Color>
+                <Color x:Key="ErrorContainerColor">#8C1D18</Color>
+                <Color x:Key="OnErrorContainerColor">#F9DEDC</Color>
+                <!-- Background -->
+                <Color x:Key="BackgroundColor">#1C1B1F</Color>
+                <Color x:Key="OnBackgroundColor">#E6E1E5</Color>
+                <!-- Surface -->
+                <Color x:Key="SurfaceColor">#1C1B1F</Color>
+                <Color x:Key="OnSurfaceColor">#E6E1E5</Color>
+                <Color x:Key="SurfaceVariantColor">#49454F</Color>
+                <Color x:Key="OnSurfaceVariantColor">#CAC4D0</Color>
+                <Color x:Key="SurfaceInverseColor">#E6E1E5</Color>
+                <Color x:Key="OnSurfaceInverseColor">#313033</Color>
+                <Color x:Key="SurfaceTintColor">#C7BFFF</Color>
+                <!-- Outline -->
+                <Color x:Key="OutlineColor">#938F99</Color>
+                <Color x:Key="OutlineVariantColor">#57545D</Color>
+            </ResourceDictionary>
+        </ResourceDictionary.ThemeDictionaries>
+    </ResourceDictionary>
 
 # [**C#**](#tab/csharp)
 
-namespace PROJECT_NAME.Styles;
-
-public sealed partial class ColorPaletteOverride : ResourceDictionary
-{
-    public ColorPaletteOverride()
+    namespace PROJECT_NAME.Styles;
+    public sealed partial class ColorPaletteOverride : ResourceDictionary
     {
-        this.Build
-        (
-            r => r
-                .Add(Uno.Themes.Markup.Theme.Colors.Primary.Default, light: "#6750A4", dark: "#D0BCFF")
-                .Add(Uno.Themes.Markup.Theme.Colors.Primary.Inverse, light: "#D0BCFF", dark: "#6750A4")
-                .Add(Uno.Themes.Markup.Theme.Colors.Primary.Container, light: "#EADDFF", dark: "#4F378B")
-                .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Default, light: "#FFFFFF", dark: "#371E73")
-                .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Container, light: "#21005E", dark: "#EADDFF")
-                .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Default, light: "#625B71", dark: "#CCC2DC")
-                .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Container, light: "#E5DFF9", dark: "#474459")
-                .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Default, light: "#FFFFFF", dark: "#332D41")
-                .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Container, light: "#1B192C", dark: "#E5DFF9")
-                .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Default, light: "#7D5260", dark: "#EFB8C8")
-                .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Container, light: "#FFD8E4", dark: "#633B48")
-                .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Default, light: "#FFFFFF", dark: "#492532")
-                .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Container, light: "#370B1E", dark: "#FFD8E4")
-                .Add(Uno.Themes.Markup.Theme.Colors.Error.Default, light: "#B3261E", dark: "#F2B8B5")
-                .Add(Uno.Themes.Markup.Theme.Colors.Error.Container, light: "#F9DEDC", dark: "#8C1D18")
-                .Add(Uno.Themes.Markup.Theme.Colors.OnError.Default, light: "#FFFFFF", dark: "#601410")
-                .Add(Uno.Themes.Markup.Theme.Colors.OnError.Container, light: "#370B1E", dark: "#F9DEDC")
-                .Add(Uno.Themes.Markup.Theme.Colors.Background.Default, light: "#FFFBFE", dark: "#1C1B1F")
-                .Add(Uno.Themes.Markup.Theme.Colors.OnBackground.Default, light: "#1C1B1F", dark: "#E6E1E5")
-                .Add(Uno.Themes.Markup.Theme.Colors.Surface.Default, light: "#FFFBFE", dark: "#1C1B1F")
-                .Add(Uno.Themes.Markup.Theme.Colors.Surface.Variant, light: "#E7E0EC", dark: "#49454F")
-                .Add(Uno.Themes.Markup.Theme.Colors.Surface.Inverse, light: "#313033", dark: "#E6E1E5")
-                .Add(Uno.Themes.Markup.Theme.Colors.Surface.Tint, light: "#5946D2", dark: "#C7BFFF")
-                .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Default, light: "#1C1B1F", dark: "#E6E1E5")
-                .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Variant, light: "#A5A0AC", dark: "#CAC4D0")
-                .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Inverse, light: "#F4EFF4", dark: "#313033")
-                .Add(Uno.Themes.Markup.Theme.Colors.Outline.Default, light: "#79747E", dark: "#938F99")
-                .Add(Uno.Themes.Markup.Theme.Colors.Outline.Variant, light: "#C9C5D0", dark: "#57545D")		
-        );
+        public ColorPaletteOverride()
+        {
+            this.Build
+            (
+                r => r
+                    .Add(Uno.Themes.Markup.Theme.Colors.Primary.Default, light: "#6750A4", dark: "#D0BCFF")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Primary.Inverse, light: "#D0BCFF", dark: "#6750A4")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Primary.Container, light: "#EADDFF", dark: "#4F378B")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Default, light: "#FFFFFF", dark: "#371E73")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Container, light: "#21005E", dark: "#EADDFF")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Default, light: "#625B71", dark: "#CCC2DC")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Container, light: "#E5DFF9", dark: "#474459")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Default, light: "#FFFFFF", dark: "#332D41")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Container, light: "#1B192C", dark: "#E5DFF9")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Default, light: "#7D5260", dark: "#EFB8C8")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Container, light: "#FFD8E4", dark: "#633B48")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Default, light: "#FFFFFF", dark: "#492532")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Container, light: "#370B1E", dark: "#FFD8E4")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Error.Default, light: "#B3261E", dark: "#F2B8B5")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Error.Container, light: "#F9DEDC", dark: "#8C1D18")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnError.Default, light: "#FFFFFF", dark: "#601410")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnError.Container, light: "#370B1E", dark: "#F9DEDC")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Background.Default, light: "#FFFBFE", dark: "#1C1B1F")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnBackground.Default, light: "#1C1B1F", dark: "#E6E1E5")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Default, light: "#FFFBFE", dark: "#1C1B1F")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Variant, light: "#E7E0EC", dark: "#49454F")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Inverse, light: "#313033", dark: "#E6E1E5")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Tint, light: "#5946D2", dark: "#C7BFFF")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Default, light: "#1C1B1F", dark: "#E6E1E5")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Variant, light: "#A5A0AC", dark: "#CAC4D0")
+                    .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Inverse, light: "#F4EFF4", dark: "#313033")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Outline.Default, light: "#79747E", dark: "#938F99")
+                    .Add(Uno.Themes.Markup.Theme.Colors.Outline.Variant, light: "#C9C5D0", dark: "#57545D")		
+            );
+        }
     }
-}
 
 ***
 4. In `AppResources` file, update `MaterialTheme` with the override from the previous steps:
 # [**XAML**](#tab/xaml)
 
-<MaterialTheme xmlns="using:Uno.Material"
-                ColorOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialColorsOverride.xaml" />
+    <MaterialTheme xmlns="using:Uno.Material"
+                    ColorOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialColorsOverride.xaml" />
 
 # [**C#**](#tab/csharp)
 
-this.Build(r => r.Merged(
-        new MaterialTheme()
-            .ColorOverrideDictionary(new Styles.ColorPaletteOverride())));
+    this.Build(r => r.Merged(
+            new MaterialTheme()
+                .ColorOverrideDictionary(new Styles.ColorPaletteOverride())));
 
 ***
 ### Change Default Font
@@ -292,41 +291,41 @@ If you would like Uno.Material to use a different font, you can override the def
 4. Assuming the font file has been placed in the **App Code Library** within, for example, a directory such as `Assets/Fonts/MyCustomFont.ttf`, your override file would look like the following:
 # [**XAML**](#tab/xaml)
 
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <FontFamily x:Key="MaterialLightFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont</FontFamily>
-    <FontFamily x:Key="MaterialMediumFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont</FontFamily>
-    <FontFamily x:Key="MaterialRegularFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont</FontFamily>
-</ResourceDictionary>
+    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+        <FontFamily x:Key="MaterialLightFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont</FontFamily>
+        <FontFamily x:Key="MaterialMediumFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont</FontFamily>
+        <FontFamily x:Key="MaterialRegularFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont</FontFamily>
+    </ResourceDictionary>
 
 # [**C#**](#tab/csharp)
 
-namespace PROJECT_NAME.Styles;
+    namespace PROJECT_NAME.Styles;
 
-public sealed class MaterialFontsOverride : ResourceDictionary
-{
-    public MaterialFontsOverride()
+    public sealed class MaterialFontsOverride : ResourceDictionary
     {
-        this.Build(r => r
-            .Add<FontFamily>("MaterialLightFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont")
-            .Add<FontFamily>("MaterialMediumFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont")
-            .Add<FontFamily>("MaterialRegularFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont"));
+        public MaterialFontsOverride()
+        {
+            this.Build(r => r
+                .Add<FontFamily>("MaterialLightFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont")
+                .Add<FontFamily>("MaterialMediumFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont")
+                .Add<FontFamily>("MaterialRegularFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont"));
+        }
     }
-}
 
 ***
 
 5. In `AppResources` file, update `MaterialTheme` with the override from the previous steps:
 # [**XAML**](#tab/xaml)
 
-<MaterialTheme xmlns="using:Uno.Material"
-                FontOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialFontsOverride.xaml" />
+    <MaterialTheme xmlns="using:Uno.Material"
+                    FontOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialFontsOverride.xaml" />
 
 # [**C#**](#tab/csharp)
 
-this.Build(r => r.Merged(
-    new MaterialTheme()
-        .FontOverrideDictionary(new Styles.MaterialFontsOverride())));
+    this.Build(r => r.Merged(
+        new MaterialTheme()
+            .FontOverrideDictionary(new Styles.MaterialFontsOverride())));
 
 ***
 

From 2d493fc97b37cf29c1803c2973474c9b9844eea7 Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Mon, 18 Dec 2023 13:20:06 +0000
Subject: [PATCH 7/8] chore: Tweaks

---
 doc/material-controls-extensions.md | 2 +-
 doc/material-getting-started.md     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/doc/material-controls-extensions.md b/doc/material-controls-extensions.md
index 2d49f0a24..010e54eb6 100644
--- a/doc/material-controls-extensions.md
+++ b/doc/material-controls-extensions.md
@@ -206,7 +206,7 @@ The above code will produce the following result:
 
 ![Uno Material Elevation Buttons with Tint Enabled](assets/material-elevation-buttons.png)
 
-If we were to alter the code above and set `IsTintEnabled` to `False` (XAML: `um:ControlExtensions.IsTintEnabled="False"` / C#: `ControlExtensions(isTintEnabled: false)`) on each of the buttons, we would see elevated buttons without tints:
+If we were to alter the code above and set `IsTintEnabled` to `False` (XAML: `um:ControlExtensions.IsTintEnabled="False"` or C#: `ControlExtensions(isTintEnabled: false)`) on each of the buttons, we would see elevated buttons without tints:
 
 ![Uno Material Elevation Buttons with Tint Disabled](assets/material-elevation-buttons-shadow-only.png)
 
diff --git a/doc/material-getting-started.md b/doc/material-getting-started.md
index a3ae32665..2691464b3 100644
--- a/doc/material-getting-started.md
+++ b/doc/material-getting-started.md
@@ -77,7 +77,7 @@ If your application is based on the older solution template that includes a shar
 1. Open an existing Uno project
 2. In the Solution Explorer panel, right-click on your solution name and select `Manage NuGet Packages for Solution ...`. Choose either:
      - The [`Uno.Material`](https://www.nuget.org/packages/Uno.Material/) package when targetting Xamarin/UWP
-     - The [`Uno.Material.WinUI`](https://www.nuget.org/packages/Uno.Material.WinUI) package for XAML or [`Uno.Material.WinUI.Markup`](https://www.nuget.org/packages/Uno.Material.WinUI.Markup) for C# Markup, when targetting net6.0+/WinUI
+     - The [`Uno.Material.WinUI`](https://www.nuget.org/packages/Uno.Material.WinUI) package when targetting net6.0+/WinUI
 
 3. Select the following projects for installation:
     - `PROJECT_NAME.Wasm.csproj`
@@ -85,7 +85,7 @@ If your application is based on the older solution template that includes a shar
     - `PROJECT_NAME.Skia.Gtk.csproj`
     - `PROJECT_NAME.Skia.WPF.csproj`
     - `PROJECT_NAME.Windows.csproj` (or `PROJECT_NAME.UWP.csproj` for existing projects)
-4. Add the following resources inside the `App` file:
+4. Add the following resources inside `App.xaml` file:
 
     ```xml
     <Application ...>

From 931cbd54c9a2bb809399a90b1b6fce677319279d Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Thu, 21 Dec 2023 17:54:08 +0000
Subject: [PATCH 8/8] docs: Fixing snippets format

---
 doc/material-controls-extensions.md | 223 ++++++++--------
 doc/material-getting-started.md     | 380 ++++++++++++++--------------
 2 files changed, 302 insertions(+), 301 deletions(-)

diff --git a/doc/material-controls-extensions.md b/doc/material-controls-extensions.md
index 010e54eb6..7a3242e81 100644
--- a/doc/material-controls-extensions.md
+++ b/doc/material-controls-extensions.md
@@ -16,48 +16,48 @@ Here are supported control with samples:
 * TextBox:
 
 # [**XAML**](#tab/xaml)
-
-    <TextBox Style="{StaticResource MaterialFilledTextBoxStyle}">
-        <um:ControlExtensions.Icon>
-            <SymbolIcon Symbol="SolidStar" />
-        </um:ControlExtensions.Icon>
-    </ComboBox>
-
+```xml
+<TextBox Style="{StaticResource MaterialFilledTextBoxStyle}">
+    <um:ControlExtensions.Icon>
+        <SymbolIcon Symbol="SolidStar" />
+    </um:ControlExtensions.Icon>
+</ComboBox>
+```
 
 # [**C#**](#tab/csharp)
-
-    new TextBox()
-        .Style(Theme.TextBox.Styles.Filled)
-        .ControlExtensions
-        (
-            icon:
-                new SymbolIcon()
-                    .Symbol(Symbol.SolidStar)
-        )
-
+```cs
+new TextBox()
+    .Style(Theme.TextBox.Styles.Filled)
+    .ControlExtensions
+    (
+        icon:
+            new SymbolIcon()
+                .Symbol(Symbol.SolidStar)
+    )
+```
 ***
 
 * ComboBox:
 
 # [**XAML**](#tab/xaml)
-
-    <ComboBox Style="{StaticResource MaterialComboBoxStyle}">
-        <um:ControlExtensions.Icon>
-            <SymbolIcon Symbol="SolidStar" />
-        </um:ControlExtensions.Icon>
-    </ComboBox>
-
+```xml
+<ComboBox Style="{StaticResource MaterialComboBoxStyle}">
+    <um:ControlExtensions.Icon>
+        <SymbolIcon Symbol="SolidStar" />
+    </um:ControlExtensions.Icon>
+</ComboBox>
+```
 # [**C#**](#tab/csharp)
-
-    new ComboBox()
-        .Style(Theme.ComboBox.Styles.Default)
-        .ControlExtensions
-        (
-            icon:
-                new SymbolIcon()
-                    .Symbol(Symbol.SolidStar)
-        )
-
+```cs
+new ComboBox()
+    .Style(Theme.ComboBox.Styles.Default)
+    .ControlExtensions
+    (
+        icon:
+            new SymbolIcon()
+                .Symbol(Symbol.SolidStar)
+    )
+```
 ***
 
 ## Alternate Content
@@ -68,34 +68,34 @@ It's control specific and for now, you can only use it with the ToggleButton con
 ### Alternate Content on ToggleButton
 
 # [**XAML**](#tab/xaml)
-
-    <ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
-        <!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
-        <PathIcon Data="{StaticResource Icon_more_horizontal}" />
-        <!-- This is the alternate content - which is when the control state is CHECKED -->
-        <um:ControlExtensions.AlternateContent>
-            <PathIcon Data="{StaticResource Icon_more_vertical}" />
-        </um:ControlExtensions.AlternateContent>
-    </ToggleButton>
-
+```xml
+<ToggleButton Style="{StaticResource MaterialToggleButtonIconStyle}">
+    <!-- This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton) -->
+    <PathIcon Data="{StaticResource Icon_more_horizontal}" />
+    <!-- This is the alternate content - which is when the control state is CHECKED -->
+    <um:ControlExtensions.AlternateContent>
+        <PathIcon Data="{StaticResource Icon_more_vertical}" />
+    </um:ControlExtensions.AlternateContent>
+</ToggleButton>
+```
 # [**C#**](#tab/csharp)
-
-    new ToggleButton()
-        .Style(Theme.ToggleButton.Styles.Icon)
-        // This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton)
-        .Content
-        (
+```cs
+new ToggleButton()
+    .Style(Theme.ToggleButton.Styles.Icon)
+    // This is the default content - which is when the control state is UNCHECKED (the default value of a ToggleButton)
+    .Content
+    (
+        new PathIcon()
+            .Data(StaticResource.Get<Geometry>("Icon_more_horizontal"))
+    )
+    // This is the alternate content - which is when the control state is CHECKED
+    .ControlExtensions
+    (
+        alternateContent:
             new PathIcon()
-                .Data(StaticResource.Get<Geometry>("Icon_more_horizontal"))
-        )
-        // This is the alternate content - which is when the control state is CHECKED
-        .ControlExtensions
-        (
-            alternateContent:
-                new PathIcon()
-                    .Data(StaticResource.Get<Geometry>("Icon_more_vertical"))
-        )
-
+                .Data(StaticResource.Get<Geometry>("Icon_more_vertical"))
+    )
+```
 ***
 
 ## Elevation
@@ -147,59 +147,60 @@ Within the `ControlTemplate` of the `ElevatedButtonStyle`, instead of performing
 Applying the surface tint for elevated controls is optional and must be explicitly enabled through the use of the `IsTintEnabled` attached property. Below is an example of how an elevated control may appear  with or without a surface tint:
 
 # [**XAML**](#tab/xaml)
-
-    <StackPanel Spacing="8">
-        <Button Content="Elevation 0"
-                um:ControlExtensions.Elevation="0"
-                Style="{StaticResource MaterialElevatedButtonStyle}" />
-        <Button Content="Elevation 1"
-                um:ControlExtensions.Elevation="1"
-                Style="{StaticResource MaterialElevatedButtonStyle}" />
-        <Button Content="Elevation 2"
-                um:ControlExtensions.Elevation="2"
-                Style="{StaticResource MaterialElevatedButtonStyle}" />
-        <Button Content="Elevation 3"
-                um:ControlExtensions.Elevation="3"
-                Style="{StaticResource MaterialElevatedButtonStyle}" />
-        <Button Content="Elevation 4"
-                um:ControlExtensions.Elevation="4"
-                Style="{StaticResource MaterialElevatedButtonStyle}" />
-        <Button Content="Elevation 5"
-                um:ControlExtensions.Elevation="5"
-                Style="{StaticResource MaterialElevatedButtonStyle}" />
-    </StackPanel> 
-
+```xml
+<StackPanel Spacing="8">
+    <Button Content="Elevation 0"
+            um:ControlExtensions.Elevation="0"
+            Style="{StaticResource MaterialElevatedButtonStyle}" />
+    <Button Content="Elevation 1"
+            um:ControlExtensions.Elevation="1"
+            Style="{StaticResource MaterialElevatedButtonStyle}" />
+    <Button Content="Elevation 2"
+            um:ControlExtensions.Elevation="2"
+            Style="{StaticResource MaterialElevatedButtonStyle}" />
+    <Button Content="Elevation 3"
+            um:ControlExtensions.Elevation="3"
+            Style="{StaticResource MaterialElevatedButtonStyle}" />
+    <Button Content="Elevation 4"
+            um:ControlExtensions.Elevation="4"
+            Style="{StaticResource MaterialElevatedButtonStyle}" />
+    <Button Content="Elevation 5"
+            um:ControlExtensions.Elevation="5"
+            Style="{StaticResource MaterialElevatedButtonStyle}" />
+</StackPanel> 
+```
 
 # [**C#**](#tab/csharp)
-
-    new StackPanel()
-        .Spacing(8)
-        .Children(
-            new Button()
-                .Content("Elevation 0")
-                .ControlExtensions(elevation: 0)
-                .Style(Theme.Button.Styles.Elevated),
-            new Button()
-                .Content("Elevation 1")
-                .ControlExtensions(elevation: 1)
-                .Style(Theme.Button.Styles.Elevated),
-            new Button()
-                .Content("Elevation 2")
-                .ControlExtensions(elevation: 2)
-                .Style(Theme.Button.Styles.Elevated),
-            new Button()
-                .Content("Elevation 3")
-                .ControlExtensions(elevation: 3)
-                .Style(Theme.Button.Styles.Elevated),
-            new Button()
-                .Content("Elevation 4")
-                .ControlExtensions(elevation: 4)
-                .Style(Theme.Button.Styles.Elevated),
-            new Button()
-                .Content("Elevation 5")
-                .ControlExtensions(elevation: 5)
-                .Style(Theme.Button.Styles.Elevated)
-        )
+```cs
+new StackPanel()
+    .Spacing(8)
+    .Children(
+        new Button()
+            .Content("Elevation 0")
+            .ControlExtensions(elevation: 0)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 1")
+            .ControlExtensions(elevation: 1)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 2")
+            .ControlExtensions(elevation: 2)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 3")
+            .ControlExtensions(elevation: 3)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 4")
+            .ControlExtensions(elevation: 4)
+            .Style(Theme.Button.Styles.Elevated),
+        new Button()
+            .Content("Elevation 5")
+            .ControlExtensions(elevation: 5)
+            .Style(Theme.Button.Styles.Elevated)
+    )
+```
 ***
 
 The above code will produce the following result:
diff --git a/doc/material-getting-started.md b/doc/material-getting-started.md
index 2691464b3..566238d0e 100644
--- a/doc/material-getting-started.md
+++ b/doc/material-getting-started.md
@@ -46,28 +46,28 @@ Initialization of the Uno.Material resources is handled by the specialized `Mate
 4. Add the following Material resources to `AppResources`:
 
 # [**XAML**](#tab/xaml)
-
-    <ResourceDictionary>
-        <ResourceDictionary.MergedDictionaries>
-            <!-- Load Uno.Material resources -->
-            <MaterialTheme xmlns="using:Uno.Material" />
-        </ResourceDictionary.MergedDictionaries>
-    </ResourceDictionary>
-
+```xml
+<ResourceDictionary>
+    <ResourceDictionary.MergedDictionaries>
+        <!-- Load Uno.Material resources -->
+        <MaterialTheme xmlns="using:Uno.Material" />
+    </ResourceDictionary.MergedDictionaries>
+</ResourceDictionary>
+```
 # [**C#**](#tab/csharp)
+```cs
+using Uno.Material;
 
-    using Uno.Material;
-
-    public sealed class AppResources : ResourceDictionary
+public sealed class AppResources : ResourceDictionary
+{
+    public AppResources()
     {
-        public AppResources()
-        {
-            // Load Uno.Material resources
-            this.Build(r => r.Merged(
-                new MaterialTheme()));
-        }
+        // Load Uno.Material resources
+        this.Build(r => r.Merged(
+            new MaterialTheme()));
     }
-
+}
+```
 ***
 
 ### Installing Uno.Material on previous versions of Uno Platform
@@ -85,7 +85,7 @@ If your application is based on the older solution template that includes a shar
     - `PROJECT_NAME.Skia.Gtk.csproj`
     - `PROJECT_NAME.Skia.WPF.csproj`
     - `PROJECT_NAME.Windows.csproj` (or `PROJECT_NAME.UWP.csproj` for existing projects)
-4. Add the following resources inside `App.xaml` file:
+4. Add the following resources inside the `App.xaml` file:
 
     ```xml
     <Application ...>
@@ -128,156 +128,156 @@ Use this when you want to specify MANUALLY each colors.
 2. Save the new override file within the **App Code Library**, for example, under `Styles/Application`.
 3. Replace the content with:
 # [**XAML**](#tab/xaml)
-
-    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-        <ResourceDictionary.ThemeDictionaries>
-            <!-- Light Theme -->
-            <ResourceDictionary x:Key="Light">
-                <!-- Primary -->
-                <Color x:Key="PrimaryColor">#6750A4</Color>
-                <Color x:Key="PrimaryInverseColor">#D0BCFF</Color>
-                <Color x:Key="OnPrimaryColor">#FFFFFF</Color>
-                <Color x:Key="PrimaryContainerColor">#EADDFF</Color>
-                <Color x:Key="OnPrimaryContainerColor">#21005E</Color>
-                <!-- Primary Variant Legacy Colors -->
-                <Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
-                <Color x:Key="PrimaryVariantLightColor">#B6A8FB</Color>
-                <!-- Secondary -->
-                <Color x:Key="SecondaryColor">#625B71</Color>
-                <Color x:Key="OnSecondaryColor">#FFFFFF</Color>
-                <Color x:Key="SecondaryContainerColor">#E5DFF9</Color>
-                <Color x:Key="OnSecondaryContainerColor">#1B192C</Color>
-                <!-- Secondary Variant Legacy Colors -->
-                <Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
-                <Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
-                <!-- Tertiary -->
-                <Color x:Key="TertiaryColor">#7D5260</Color>
-                <Color x:Key="OnTertiaryColor">#FFFFFF</Color>
-                <Color x:Key="TertiaryContainerColor">#FFD8E4</Color>
-                <Color x:Key="OnTertiaryContainerColor">#370B1E</Color>
-                <!-- Error -->
-                <Color x:Key="ErrorColor">#B3261E</Color>
-                <Color x:Key="OnErrorColor">#FFFFFF</Color>
-                <Color x:Key="ErrorContainerColor">#F9DEDC</Color>
-                <Color x:Key="OnErrorContainerColor">#370B1E</Color>
-                <!-- Background -->
-                <Color x:Key="BackgroundColor">#FFFBFE</Color>
-                <Color x:Key="OnBackgroundColor">#1C1B1F</Color>
-                <!-- Surface -->
-                <Color x:Key="SurfaceColor">#FFFBFE</Color>
-                <Color x:Key="OnSurfaceColor">#1C1B1F</Color>
-                <Color x:Key="SurfaceVariantColor">#E7E0EC</Color>
-                <Color x:Key="OnSurfaceVariantColor">#A5A0AC</Color>
-                <Color x:Key="SurfaceInverseColor">#313033</Color>
-                <Color x:Key="OnSurfaceInverseColor">#F4EFF4</Color>
-                <Color x:Key="SurfaceTintColor">#5946D2</Color>
-                <!-- Outline -->
-                <Color x:Key="OutlineColor">#79747E</Color>
-                <Color x:Key="OutlineVariantColor">#C9C5D0</Color>
-            </ResourceDictionary>
-            <!-- Dark Theme -->
-            <ResourceDictionary x:Key="Dark">
-                <!-- Primary -->
-                <Color x:Key="PrimaryColor">#D0BCFF</Color>
-                <Color x:Key="OnPrimaryColor">#371E73</Color>
-                <Color x:Key="PrimaryContainerColor">#4F378B</Color>
-                <Color x:Key="OnPrimaryContainerColor">#EADDFF</Color>
-                <Color x:Key="PrimaryInverseColor">#6750A4</Color>
-                <!-- Primary Variant Legacy Colors -->
-                <Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
-                <Color x:Key="PrimaryVariantLightColor">#D4CBFC</Color>
-                <!-- Secondary -->
-                <Color x:Key="SecondaryColor">#CCC2DC</Color>
-                <Color x:Key="OnSecondaryColor">#332D41</Color>
-                <Color x:Key="SecondaryContainerColor">#474459</Color>
-                <Color x:Key="OnSecondaryContainerColor">#E5DFF9</Color>
-                <!-- Secondary Variant Legacy Colors -->
-                <Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
-                <Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
-                <!-- Tertiary -->
-                <Color x:Key="TertiaryColor">#EFB8C8</Color>
-                <Color x:Key="OnTertiaryColor">#492532</Color>
-                <Color x:Key="TertiaryContainerColor">#633B48</Color>
-                <Color x:Key="OnTertiaryContainerColor">#FFD8E4</Color>
-                <!-- Error -->
-                <Color x:Key="ErrorColor">#F2B8B5</Color>
-                <Color x:Key="OnErrorColor">#601410</Color>
-                <Color x:Key="ErrorContainerColor">#8C1D18</Color>
-                <Color x:Key="OnErrorContainerColor">#F9DEDC</Color>
-                <!-- Background -->
-                <Color x:Key="BackgroundColor">#1C1B1F</Color>
-                <Color x:Key="OnBackgroundColor">#E6E1E5</Color>
-                <!-- Surface -->
-                <Color x:Key="SurfaceColor">#1C1B1F</Color>
-                <Color x:Key="OnSurfaceColor">#E6E1E5</Color>
-                <Color x:Key="SurfaceVariantColor">#49454F</Color>
-                <Color x:Key="OnSurfaceVariantColor">#CAC4D0</Color>
-                <Color x:Key="SurfaceInverseColor">#E6E1E5</Color>
-                <Color x:Key="OnSurfaceInverseColor">#313033</Color>
-                <Color x:Key="SurfaceTintColor">#C7BFFF</Color>
-                <!-- Outline -->
-                <Color x:Key="OutlineColor">#938F99</Color>
-                <Color x:Key="OutlineVariantColor">#57545D</Color>
-            </ResourceDictionary>
-        </ResourceDictionary.ThemeDictionaries>
-    </ResourceDictionary>
-
+```xml
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ResourceDictionary.ThemeDictionaries>
+        <!-- Light Theme -->
+        <ResourceDictionary x:Key="Light">
+            <!-- Primary -->
+            <Color x:Key="PrimaryColor">#6750A4</Color>
+            <Color x:Key="PrimaryInverseColor">#D0BCFF</Color>
+            <Color x:Key="OnPrimaryColor">#FFFFFF</Color>
+            <Color x:Key="PrimaryContainerColor">#EADDFF</Color>
+            <Color x:Key="OnPrimaryContainerColor">#21005E</Color>
+            <!-- Primary Variant Legacy Colors -->
+            <Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
+            <Color x:Key="PrimaryVariantLightColor">#B6A8FB</Color>
+            <!-- Secondary -->
+            <Color x:Key="SecondaryColor">#625B71</Color>
+            <Color x:Key="OnSecondaryColor">#FFFFFF</Color>
+            <Color x:Key="SecondaryContainerColor">#E5DFF9</Color>
+            <Color x:Key="OnSecondaryContainerColor">#1B192C</Color>
+            <!-- Secondary Variant Legacy Colors -->
+            <Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
+            <Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
+            <!-- Tertiary -->
+            <Color x:Key="TertiaryColor">#7D5260</Color>
+            <Color x:Key="OnTertiaryColor">#FFFFFF</Color>
+            <Color x:Key="TertiaryContainerColor">#FFD8E4</Color>
+            <Color x:Key="OnTertiaryContainerColor">#370B1E</Color>
+            <!-- Error -->
+            <Color x:Key="ErrorColor">#B3261E</Color>
+            <Color x:Key="OnErrorColor">#FFFFFF</Color>
+            <Color x:Key="ErrorContainerColor">#F9DEDC</Color>
+            <Color x:Key="OnErrorContainerColor">#370B1E</Color>
+            <!-- Background -->
+            <Color x:Key="BackgroundColor">#FFFBFE</Color>
+            <Color x:Key="OnBackgroundColor">#1C1B1F</Color>
+            <!-- Surface -->
+            <Color x:Key="SurfaceColor">#FFFBFE</Color>
+            <Color x:Key="OnSurfaceColor">#1C1B1F</Color>
+            <Color x:Key="SurfaceVariantColor">#E7E0EC</Color>
+            <Color x:Key="OnSurfaceVariantColor">#A5A0AC</Color>
+            <Color x:Key="SurfaceInverseColor">#313033</Color>
+            <Color x:Key="OnSurfaceInverseColor">#F4EFF4</Color>
+            <Color x:Key="SurfaceTintColor">#5946D2</Color>
+            <!-- Outline -->
+            <Color x:Key="OutlineColor">#79747E</Color>
+            <Color x:Key="OutlineVariantColor">#C9C5D0</Color>
+        </ResourceDictionary>
+        <!-- Dark Theme -->
+        <ResourceDictionary x:Key="Dark">
+            <!-- Primary -->
+            <Color x:Key="PrimaryColor">#D0BCFF</Color>
+            <Color x:Key="OnPrimaryColor">#371E73</Color>
+            <Color x:Key="PrimaryContainerColor">#4F378B</Color>
+            <Color x:Key="OnPrimaryContainerColor">#EADDFF</Color>
+            <Color x:Key="PrimaryInverseColor">#6750A4</Color>
+            <!-- Primary Variant Legacy Colors -->
+            <Color x:Key="PrimaryVariantDarkColor">#353FE5</Color>
+            <Color x:Key="PrimaryVariantLightColor">#D4CBFC</Color>
+            <!-- Secondary -->
+            <Color x:Key="SecondaryColor">#CCC2DC</Color>
+            <Color x:Key="OnSecondaryColor">#332D41</Color>
+            <Color x:Key="SecondaryContainerColor">#474459</Color>
+            <Color x:Key="OnSecondaryContainerColor">#E5DFF9</Color>
+            <!-- Secondary Variant Legacy Colors -->
+            <Color x:Key="SecondaryVariantDarkColor">#2BB27E</Color>
+            <Color x:Key="SecondaryVariantLightColor">#9CFFDF</Color>
+            <!-- Tertiary -->
+            <Color x:Key="TertiaryColor">#EFB8C8</Color>
+            <Color x:Key="OnTertiaryColor">#492532</Color>
+            <Color x:Key="TertiaryContainerColor">#633B48</Color>
+            <Color x:Key="OnTertiaryContainerColor">#FFD8E4</Color>
+            <!-- Error -->
+            <Color x:Key="ErrorColor">#F2B8B5</Color>
+            <Color x:Key="OnErrorColor">#601410</Color>
+            <Color x:Key="ErrorContainerColor">#8C1D18</Color>
+            <Color x:Key="OnErrorContainerColor">#F9DEDC</Color>
+            <!-- Background -->
+            <Color x:Key="BackgroundColor">#1C1B1F</Color>
+            <Color x:Key="OnBackgroundColor">#E6E1E5</Color>
+            <!-- Surface -->
+            <Color x:Key="SurfaceColor">#1C1B1F</Color>
+            <Color x:Key="OnSurfaceColor">#E6E1E5</Color>
+            <Color x:Key="SurfaceVariantColor">#49454F</Color>
+            <Color x:Key="OnSurfaceVariantColor">#CAC4D0</Color>
+            <Color x:Key="SurfaceInverseColor">#E6E1E5</Color>
+            <Color x:Key="OnSurfaceInverseColor">#313033</Color>
+            <Color x:Key="SurfaceTintColor">#C7BFFF</Color>
+            <!-- Outline -->
+            <Color x:Key="OutlineColor">#938F99</Color>
+            <Color x:Key="OutlineVariantColor">#57545D</Color>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+</ResourceDictionary>
+```
 # [**C#**](#tab/csharp)
-
-    namespace PROJECT_NAME.Styles;
-    public sealed partial class ColorPaletteOverride : ResourceDictionary
+```cs
+namespace PROJECT_NAME.Styles;
+public sealed partial class ColorPaletteOverride : ResourceDictionary
+{
+    public ColorPaletteOverride()
     {
-        public ColorPaletteOverride()
-        {
-            this.Build
-            (
-                r => r
-                    .Add(Uno.Themes.Markup.Theme.Colors.Primary.Default, light: "#6750A4", dark: "#D0BCFF")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Primary.Inverse, light: "#D0BCFF", dark: "#6750A4")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Primary.Container, light: "#EADDFF", dark: "#4F378B")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Default, light: "#FFFFFF", dark: "#371E73")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Container, light: "#21005E", dark: "#EADDFF")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Default, light: "#625B71", dark: "#CCC2DC")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Container, light: "#E5DFF9", dark: "#474459")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Default, light: "#FFFFFF", dark: "#332D41")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Container, light: "#1B192C", dark: "#E5DFF9")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Default, light: "#7D5260", dark: "#EFB8C8")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Container, light: "#FFD8E4", dark: "#633B48")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Default, light: "#FFFFFF", dark: "#492532")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Container, light: "#370B1E", dark: "#FFD8E4")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Error.Default, light: "#B3261E", dark: "#F2B8B5")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Error.Container, light: "#F9DEDC", dark: "#8C1D18")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnError.Default, light: "#FFFFFF", dark: "#601410")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnError.Container, light: "#370B1E", dark: "#F9DEDC")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Background.Default, light: "#FFFBFE", dark: "#1C1B1F")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnBackground.Default, light: "#1C1B1F", dark: "#E6E1E5")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Default, light: "#FFFBFE", dark: "#1C1B1F")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Variant, light: "#E7E0EC", dark: "#49454F")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Inverse, light: "#313033", dark: "#E6E1E5")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Surface.Tint, light: "#5946D2", dark: "#C7BFFF")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Default, light: "#1C1B1F", dark: "#E6E1E5")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Variant, light: "#A5A0AC", dark: "#CAC4D0")
-                    .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Inverse, light: "#F4EFF4", dark: "#313033")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Outline.Default, light: "#79747E", dark: "#938F99")
-                    .Add(Uno.Themes.Markup.Theme.Colors.Outline.Variant, light: "#C9C5D0", dark: "#57545D")		
-            );
-        }
+        this.Build
+        (
+            r => r
+                .Add(Uno.Themes.Markup.Theme.Colors.Primary.Default, light: "#6750A4", dark: "#D0BCFF")
+                .Add(Uno.Themes.Markup.Theme.Colors.Primary.Inverse, light: "#D0BCFF", dark: "#6750A4")
+                .Add(Uno.Themes.Markup.Theme.Colors.Primary.Container, light: "#EADDFF", dark: "#4F378B")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Default, light: "#FFFFFF", dark: "#371E73")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnPrimary.Container, light: "#21005E", dark: "#EADDFF")
+                .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Default, light: "#625B71", dark: "#CCC2DC")
+                .Add(Uno.Themes.Markup.Theme.Colors.Secondary.Container, light: "#E5DFF9", dark: "#474459")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Default, light: "#FFFFFF", dark: "#332D41")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnSecondary.Container, light: "#1B192C", dark: "#E5DFF9")
+                .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Default, light: "#7D5260", dark: "#EFB8C8")
+                .Add(Uno.Themes.Markup.Theme.Colors.Tertiary.Container, light: "#FFD8E4", dark: "#633B48")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Default, light: "#FFFFFF", dark: "#492532")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnTertiary.Container, light: "#370B1E", dark: "#FFD8E4")
+                .Add(Uno.Themes.Markup.Theme.Colors.Error.Default, light: "#B3261E", dark: "#F2B8B5")
+                .Add(Uno.Themes.Markup.Theme.Colors.Error.Container, light: "#F9DEDC", dark: "#8C1D18")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnError.Default, light: "#FFFFFF", dark: "#601410")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnError.Container, light: "#370B1E", dark: "#F9DEDC")
+                .Add(Uno.Themes.Markup.Theme.Colors.Background.Default, light: "#FFFBFE", dark: "#1C1B1F")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnBackground.Default, light: "#1C1B1F", dark: "#E6E1E5")
+                .Add(Uno.Themes.Markup.Theme.Colors.Surface.Default, light: "#FFFBFE", dark: "#1C1B1F")
+                .Add(Uno.Themes.Markup.Theme.Colors.Surface.Variant, light: "#E7E0EC", dark: "#49454F")
+                .Add(Uno.Themes.Markup.Theme.Colors.Surface.Inverse, light: "#313033", dark: "#E6E1E5")
+                .Add(Uno.Themes.Markup.Theme.Colors.Surface.Tint, light: "#5946D2", dark: "#C7BFFF")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Default, light: "#1C1B1F", dark: "#E6E1E5")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Variant, light: "#A5A0AC", dark: "#CAC4D0")
+                .Add(Uno.Themes.Markup.Theme.Colors.OnSurface.Inverse, light: "#F4EFF4", dark: "#313033")
+                .Add(Uno.Themes.Markup.Theme.Colors.Outline.Default, light: "#79747E", dark: "#938F99")
+                .Add(Uno.Themes.Markup.Theme.Colors.Outline.Variant, light: "#C9C5D0", dark: "#57545D")		
+        );
     }
-
+}
+```
 ***
 4. In `AppResources` file, update `MaterialTheme` with the override from the previous steps:
 # [**XAML**](#tab/xaml)
-
-    <MaterialTheme xmlns="using:Uno.Material"
-                    ColorOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialColorsOverride.xaml" />
-
+```xml
+<MaterialTheme xmlns="using:Uno.Material"
+               ColorOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialColorsOverride.xaml" />
+```
 # [**C#**](#tab/csharp)
-
-    this.Build(r => r.Merged(
-            new MaterialTheme()
-                .ColorOverrideDictionary(new Styles.ColorPaletteOverride())));
-
+```cs
+this.Build(r => r.Merged(
+        new MaterialTheme()
+            .ColorOverrideDictionary(new Styles.ColorPaletteOverride())));
+```
 ***
 ### Change Default Font
 
@@ -290,43 +290,43 @@ If you would like Uno.Material to use a different font, you can override the def
 3. Save the new override file within the **App Code Library**, for example, under `Styles/Application`.
 4. Assuming the font file has been placed in the **App Code Library** within, for example, a directory such as `Assets/Fonts/MyCustomFont.ttf`, your override file would look like the following:
 # [**XAML**](#tab/xaml)
-
-    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-        <FontFamily x:Key="MaterialLightFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont</FontFamily>
-        <FontFamily x:Key="MaterialMediumFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont</FontFamily>
-        <FontFamily x:Key="MaterialRegularFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont</FontFamily>
-    </ResourceDictionary>
-
+```xml
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <FontFamily x:Key="MaterialLightFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont</FontFamily>
+    <FontFamily x:Key="MaterialMediumFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont</FontFamily>
+    <FontFamily x:Key="MaterialRegularFontFamily">ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont</FontFamily>
+</ResourceDictionary>
+```
 # [**C#**](#tab/csharp)
+```cs
+namespace PROJECT_NAME.Styles;
 
-    namespace PROJECT_NAME.Styles;
-
-    public sealed class MaterialFontsOverride : ResourceDictionary
+public sealed class MaterialFontsOverride : ResourceDictionary
+{
+    public MaterialFontsOverride()
     {
-        public MaterialFontsOverride()
-        {
-            this.Build(r => r
-                .Add<FontFamily>("MaterialLightFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont")
-                .Add<FontFamily>("MaterialMediumFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont")
-                .Add<FontFamily>("MaterialRegularFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont"));
-        }
+        this.Build(r => r
+            .Add<FontFamily>("MaterialLightFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Light.ttf#MyCustomFont")
+            .Add<FontFamily>("MaterialMediumFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Medium.ttf#MyCustomFont")
+            .Add<FontFamily>("MaterialRegularFontFamily", "ms-appx:///PROJECT_NAME/Assets/Fonts/MyCustomFont-Regular.ttfMyCustomFont"));
     }
-
+}
+```
 ***
 
 5. In `AppResources` file, update `MaterialTheme` with the override from the previous steps:
 # [**XAML**](#tab/xaml)
-
-    <MaterialTheme xmlns="using:Uno.Material"
-                    FontOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialFontsOverride.xaml" />
-
+```xml
+<MaterialTheme xmlns="using:Uno.Material"
+                FontOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialFontsOverride.xaml" />
+```
 # [**C#**](#tab/csharp)
-
-    this.Build(r => r.Merged(
-        new MaterialTheme()
-            .FontOverrideDictionary(new Styles.MaterialFontsOverride())));
-
+```cs
+this.Build(r => r.Merged(
+    new MaterialTheme()
+        .FontOverrideDictionary(new Styles.MaterialFontsOverride())));
+```
 ***
 
 ## Additional Resources