docs: Fixes after Lint markdown files was enabled

2023-12-13 17:17:46 -05:00 · 2023-12-13 17:17:46 -05:00 · 657bfbac91
--- a/README.md
+++ b/README.md
@ -1,7 +1,7 @@
 # Uno.Themes

 <p align="center">
-  <img src="doc/assets/themes-design-systems.png">
+  <img src="doc/assets/themes-design-systems.png" alt="Themes design systems" />
 </p>

 [![Open Uno.Themes in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/unoplatform/uno.themes)
--- a/doc/cupertino-controls-styles.md
+++ b/doc/cupertino-controls-styles.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Cupertino.Styles
+---
+
 # Cupertino Controls Styles
+
 Control|Style Key
 -|-
 `Button`|CupertinoButtonStyle<br/>CupertinoContainedButtonStyle<br/>CupertinoDatePickerFlyoutButtonStyle
--- a/doc/cupertino-getting-started.md
+++ b/doc/cupertino-getting-started.md
@ -1,13 +1,13 @@
 ---
-uid: uno.themes.cupertino.getstarted
+uid: Uno.Themes.Cupertino.GetStarted
 ---

-<p align="center">
-  <img src="assets/cupertino-design-system.png">
-</p>
-
 # Uno.Cupertino

+<p align="center">
+  <img src="assets/cupertino-design-system.png" alt="Cupertino design system" />
+</p>
+
 Uno Cupertino is an add-on package that lets you apply [Cupertino - Human Interface Guideline styling](https://developer.apple.com/design/human-interface-guidelines) to your application with a few lines of code.

 ## Getting Started
--- a/doc/fluent-getting-started.md
+++ b/doc/fluent-getting-started.md
@ -1,14 +1,14 @@
 ---
-uid: uno.themes.fluent.getstarted
+uid: Uno.Themes.Fluent.GetStarted
 ---

-<p align="center">
-  <img src="assets/fluent-design-system.png">
-</p>
-
 # Fluent-styled controls

-Uno Platform 3.0 and above supports control styles conforming to the [Fluent design system](https://www.microsoft.com/design/fluent). 
+<p align="center">
+  <img src="assets/fluent-design-system.png" alt="Fluent design system" />
+</p>
+
+Uno Platform 3.0 and above supports control styles conforming to the [Fluent design system](https://www.microsoft.com/design/fluent).  
 The details below explain how to use them in your app.

 ## Upgrading existing Uno apps to use Fluent styles
@ -24,27 +24,29 @@ The step-by-step process to enable Fluent design styles within an existing Uno P
 1. In only the `UWP` head project of your solution, if you have one, install the [WinUI 2 NuGet package](https://www.nuget.org/packages/Microsoft.UI.Xaml). This step is the same as required for WinUI 2 UWP apps.

 1. Within the shared project used by all platform heads, add the `XamlControlsResources` resource dictionary to your application resources inside `App.xaml`. This step is the same as required for WinUI 2 UWP apps.
+
    ```xml
-    	<Application>
-    		<Application.Resources>
+        <Application>
+            <Application.Resources>
                <!-- Load WinUI resources -->
-    			<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
-    		</Application.Resources>
-    	</Application>
+                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+            </Application.Resources>
+        </Application>
    ```
+
    Or, if you have other existing application-scope resources, add `XamlControlsResources` at the top (before other resources) as a merged dictionary:

    ```xml
-    	<Application.Resources>
-    		<ResourceDictionary>
-    			<ResourceDictionary.MergedDictionaries>
+        <Application.Resources>
+            <ResourceDictionary>
+                <ResourceDictionary.MergedDictionaries>
                    <!-- Load WinUI resources -->
-    				<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
-    				<!-- Other merged dictionaries here -->
-    			</ResourceDictionary.MergedDictionaries>
-    			<!-- Other app resources here -->
-    		</ResourceDictionary>
-    	</Application.Resources>
+                    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+                    <!-- Other merged dictionaries here -->
+                </ResourceDictionary.MergedDictionaries>
+                <!-- Other app resources here -->
+            </ResourceDictionary>
+        </Application.Resources>
    ```

 1. In all platform head projects except UWP the Fluent control styles require the Uno Fluent Assets icon font to display correctly. [Follow the instructions here](https://platform.uno/docs/articles/uno-fluent-assets.html) to upgrade your app to use this font. This step is required because the Uno Platform uses a cross-platform ready default font within its styles different from UWP's *Segoe MDL2 Assets*.
--- a/doc/lightweight-styling.md
+++ b/doc/lightweight-styling.md
@ -1,6 +1,7 @@
 ---
-uid: uno.themes.lightweightstyling
+uid: Uno.Themes.LightweightStyling
 ---
+
 # Lightweight Styling

 [Lightweight styling](https://learn.microsoft.com/windows/apps/design/style/xaml-styles#lightweight-styling) is a way to customize the appearance of XAML controls by **overriding** their default brushes, fonts, and numeric properties. Lightweight styles are changed by providing alternate resources with the same key. All Uno Material styles support the capability to be customized through resource overrides without the need to redefine the style.
@ -172,25 +173,25 @@ The general pattern used for mapping the Lightweight Styling resource keys to C#
 | Name Part | Description |
 | --- | --- |
 | `control` | Name of the control type (Button, TextBox, CheckBox, etc.) |
-| `variant` | **(Optional) Defaults to `Default`** Certain styles have multiple variants. Ex: For Button we have variants such as: Outlined, Text, Filled | 
+| `variant` | **(Optional) Defaults to `Default`** Certain styles have multiple variants. Ex: For Button we have variants such as: Outlined, Text, Filled |
 | `member-path` | The property or the nested property to assign value to. (Foreground, Background, Placeholder.Foreground, etc.) |
 | `visual-state` | **(Optional) Defaults to `Default`**  Specifies which `VisualState` that this resource will be applied to (PointerOver, Checked, Disabled, etc.)  |

 For example, the following resource keys are used with `FilledButtonStyle`, `HyperlinkButtonStyle`, and `CheckBoxStyle` from Uno Material:

-##### Filled Button
+#### Filled Button

 - `Theme.Button.Resources.Filled.Foreground.Default`
 - `Theme.Button.Resources.Filled.Foreground.Pressed`
 - `Theme.Button.Resources.Filled.Foreground.PointerOver`

-##### HyperlinkButton (Default)
+#### HyperlinkButton (Default)

 - `Theme.HyperlinkButton.Resources.Default.Foreground.Default`
 - `Theme.HyperlinkButton.Resources.Default.Foreground.Pressed`
 - `Theme.HyperlinkButton.Resources.Default.Foreground.PointerOver`

-##### CheckBox (Default)
+#### CheckBox (Default)

 - `Theme.CheckBox.Resources.Default.Foreground.Checked`
 - `Theme.CheckBox.Resources.Default.Foreground.CheckedPressed`
--- a/doc/material-colors.md
+++ b/doc/material-colors.md
@ -1,10 +1,11 @@
 ---
-uid: uno.themes.material.colors
+uid: Uno.Themes.Material.Colors
 ---

 # Material Colors and Brushes

 ## Colors
+
 | Key                        | LightValue | DarkValue |
 | -------------------------- | ---------- | --------- |
 | PrimaryColor               | #5946D2    | #C7BFFF   |
@ -41,6 +42,7 @@ uid: uno.themes.material.colors
 | OutlineVariantColor        | #C9C5D0    | #57545D   |

 ## Opacities
+
 | Key                | Value |
 | ------------------ | ----- |
 | HoverOpacity       | 0.08  |
@ -54,6 +56,7 @@ uid: uno.themes.material.colors
 | DisabledLowOpacity | 0.12  |

 ## Brushes
+
 | Key                                   | Color                      | Opacity            |
 | ------------------------------------- | -------------------------- | ------------------ |
 | PrimaryBrush                          | PrimaryColor               | 1                  |
--- a/doc/material-controls-extensions.md
+++ b/doc/material-controls-extensions.md
@ -1,3 +1,7 @@
+---
+uid: Uno.Themes.Material.Extensions
+---
+
 # Material Control Extensions

 ## Icon
@ -118,11 +122,11 @@ Applying the surface tint for elevated controls is optional and must be explicit

 The above XAML will produce the following result:

-![](assets/material-elevation-buttons.png)
+![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:

-![](assets/material-elevation-buttons-shadow-only.png)
+![Uno Material Elevation Buttons with Tint Disabled](assets/material-elevation-buttons-shadow-only.png)

 ### Supported Controls

--- a/doc/material-controls-styles.md
+++ b/doc/material-controls-styles.md
@ -1,4 +1,9 @@
-# Material Controls Styles
+---
+uid: Uno.Themes.Material.Styles
+---
+
+# Material Controls Styles
+
 Control|Style Key|IsDefaultStyle*
 -|-|-
 AppBarButton|AppBarButtonStyle|True
--- a/doc/material-dsp.md
+++ b/doc/material-dsp.md
@ -1,33 +1,39 @@
 ---
-uid: Uno.Material.DSP
+uid: Uno.Themes.Material.DSP
 ---

 # Using the DSP Tooling in Uno.Material

 ## Introduction
+
 Is it possible to automate the creation of the Material Design color palette? Yes, it is. Uno.Material provides a tooling to generate the color palette from the official Material Design color palette. This tooling is available in the [Uno.Dsp.Cli](https://nuget.org/packages/Uno.Dsp.Cli) and [Uno.Dsp.Tasks](https://nuget.org/packages/Uno.Dsp.Tasks) NuGet packages. The following instructions will cover the Uno.Dsp.Tasks version, which is more automatic.

 > [!NOTE]
 > Make sure you are referencing the generated XAML file in your
 > application's `App.xaml` file, as shown in the following example:
+>
 > ```xml
 >  <MaterialTheme xmlns="using:Uno.Material"
 >                 ColorOverrideSource="ms-appx:///PROJECT_NAME/Styles/Application/MaterialColorsOverride.xaml" />
 > ```
+>
 > More details [In the _Manual Color Overrides_ section of the Getting Started page](xref:uno.themes.material.getstarted)

 ## The Uno.Dsp.Tasks NuGet package
+
 This package will be automatically present in the project after [creating a new Uno Platform project](https://aka.platform.uno/get-started) specifying the _Material_ theme. It is also possible to add it manually to an existing Uno Platform project by adding the following line to the _PackageReference_ section of the _csproj_ file:

 * Add a nuget package reference:
+
   ```xml
   <PackageReference Include="Uno.Dsp.Tasks" Version="[latest version]" />
   ```

 * The package is already present when you select _Material_ theme during project creation:
-   ![](assets/material-theme-selection-wizard.png)
+   ![Selection of Material theme when creating a project using the Uno Template Wizard](assets/material-theme-selection-wizard.png)

 ## Generating a custom color palette and export as DSP file
+
 1. Navigate to the [Material Theme Builder](https://m3.material.io/theme-builder#/custom) and select the colors you want to use for your application.
 2. Locate the _Export_ button and pick the _material Tokens (DSP)_ format.

@ -37,6 +43,7 @@ This package will be automatically present in the project after [creating a new
 5. Build your application. The `ColorPaletterOverride.xaml` file will be automatically updated with the colors present in the DSP zip file.

 ## More flexibility
+
 This will generate the file at each build, potentially overriding any changes you made to the file. If you want to keep it that way, you can simply remove the `ColorPaletteOverride.zip` file from the `Styles` folder, the file won't get overwritten anymore.

 Alternatively, you can also use the [Uno.Dsp.Cli](https://nuget.org/packages/Uno.Dsp.Cli) package to generate the file from the command line. This will allow you to generate the file only when you want to, and not at each build.
--- a/doc/material-getting-started.md
+++ b/doc/material-getting-started.md
@ -1,13 +1,13 @@
 ---
-uid: uno.themes.material.getstarted
+uid: Uno.Themes.Material.GetStarted
 ---

-<p align="center">
-  <img src="assets/material-design-system.png">
-</p>
-
 # Uno.Material

+<p align="center">
+  <img src="assets/material-design-system.png" alt="Material design system" />
+</p>
+
 The Uno.Material library is available as NuGet packages that can be added to any new or existing Uno solution.
 Uno Material lets you apply [Material Design 3](https://m3.material.io/) styling to your application with just a few lines of code.

@ -94,6 +94,7 @@ If your application is based on the older solution template that includes a shar
 ## Customization

 ### Color Overrides using _Material Theme Builder_ and DSP format
+
 It is possible to use the [Material Theme Builder](https://m3.material.io/theme-builder#/custom) to generate a custom color palette derived from your own basic colors. The generated palette is provided in the [DSP format](https://m3.material.io/styles/color/the-color-system/color-dsp) and can be used to override the default Uno.Material colors.

 The tooling required to generate the _Material Colors Override_ file from a DSP package (zip file) will be present by default when creating a _Uno Extensions_ project with support for Uno.Material.
@ -103,6 +104,7 @@ The tooling required to generate the _Material Colors Override_ file from a DSP
 Follow this link to get [more Information about the DSP tooling](xref:Uno.Material.DSP).

 ### Manual Color Overrides
+
 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`
@ -262,7 +264,7 @@ If you would like Uno.Material to use a different font, you can override the def

 ## 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. 
+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`:
--- a/doc/material-migration.md
+++ b/doc/material-migration.md
@ -1,14 +1,16 @@
 ---
-uid: uno.themes.material.migration
+uid: Uno.Themes.Material.Migration
 ---

-# Updating to Uno.Material v3
+# Updating to Uno.Material
+
+## Updating to Uno.Material v3

 Uno.Material v3 (not to be confused with [Material Design 3](https://m3.material.io/) from Google) introduces support for [Lightweight Styling](lightweight-styling.md) as well as some breaking changes to the default style keys for some controls. Refer to the tables below for the changes that have been made within Uno.Material.

-## Styles
+### Styles

-### Removed
+#### Removed

 Key|TargetType
 -|-
@ -16,14 +18,14 @@ DefaultMaterialCalendarViewStyle|CalendarView
 MaterialSecondaryCheckBoxStyle|CheckBox
 MaterialSecondaryRadioButtonStyle|RadioButton

-### Added
+#### Added

 Key|Aliased Key|TargetType|Implicit Style
 -|-|-|-
 MaterialRatingControlStyle|RatingControlStyle|muxc:RatingControl|true
 MaterialRippleStyle|RippleStyle|um:Ripple|true

-### Modified
+#### Modified

 Key|Aliased Key|TargetType|Implicit Style
 -|-|-|-
@ -37,7 +39,7 @@ MaterialOutlinedTextBoxStyle|OutlinedTextBoxStyle|TextBox|false -> true
 MaterialTextToggleButtonStyle|TextToggleButtonStyle|ToggleButton|true -> false
 MaterialIconToggleButtonStyle|IconToggleButtonStyle|ToggleButton|false -> true

-## Resources
+### Resources

 As a result of the Lightweight Styling support, many resource keys have been added as well as renamed. For a list of all the new resource keys, please refer to the [Lightweight Styling documentation](lightweight-styling.md#resource-keys).

@ -46,7 +48,7 @@ Along with the above list of new resource keys, below is a list of the resource
 > [!NOTE]
 > Most resources, including those that have been added or renamed, have now been placed inside of a `ThemeDictionary`. This means that the resources should now be referenced using the `ThemeResource` markup extension instead of `StaticResource`. For more information on theme resources, please refer to the [XAML theme resources documentation](https://learn.microsoft.com/en-us/windows/apps/design/style/xaml-theme-resources).

-### Button
+#### Button

 Old Key|New Key|Value
 -|-|-
@ -62,13 +64,13 @@ MaterialButtonMinHeight|**_REMOVED_**|40
 MaterialOutlinedButtonBorderBrush|**_REMOVED_**|OutlineBrush
 MaterialNullToTextButtonMarginConverter|NullToTextButtonMarginConverter|

-### CalendarDatePicker
+#### CalendarDatePicker

 Old Key|New Key|Value
 -|-|-
 MaterialCalendarDatePickerBackground|**_REMOVED_**|OnSurfaceColor*0.12

-### CheckBox
+#### CheckBox

 Old Key|New Key|Value
 -|-|-
@ -79,7 +81,7 @@ CheckAreaLength|**_REMOVED_**|40
 CheckBoxCheckGlyphPathStyle|**_REMOVED_**|M28.718018,0L32,3.2819897 10.666016,24.616999 0,13.951997 3.2810059,10.670007 10.666016,18.055033z
 CheckBoxHyphenGlyphPathStyle|**_REMOVED_**|M0,0L32,0 32,5.3 0,5.3z

-### ComboBox
+#### ComboBox

 Old Key|New Key|Value
 -|-|-
@ -90,7 +92,7 @@ DownArrowPathData|ComboBoxDownArrowPathData|M0 0L5 5L10 0H0Z
 UpArrowPathData|ComboBoxUpArrowPathData|M0 0L-5 -5L-10 0H0Z
 MaterialComboBoxCornerRadius|**_REMOVED_**|4

-### DatePicker
+#### DatePicker

 Old Key|New Key|Value
 -|-|-
@ -105,7 +107,7 @@ MaterialDatePickerHeight|**_REMOVED_**|53
 MaterialDatePickerSpacerThemeWidth|**_REMOVED_**|1
 MaterialDateTimeFlyoutBorderThickness|**_REMOVED_**|1

-### FloatingActionButton
+#### FloatingActionButton

 Old Key|New Key|Value
 -|-|-
@ -152,7 +154,7 @@ MaterialFabDisabledBackground|**_REMOVED_**|SystemControlTransparentBrush
 MaterialFabBackground|**_REMOVED_**|PrimaryContainerBrush
 MaterialFabForeground|**_REMOVED_**|OnPrimaryContainerBrush

-### NavigationView
+#### NavigationView

 Old Key|New Key|Value
 -|-|-
@ -248,14 +250,14 @@ MaterialNavigationViewSplitViewCornerRadius|**_REMOVED_**|0,14,14,0
 MaterialNavigationViewPaneBackground|**_REMOVED_**|SurfaceBrush
 MaterialNavigationViewBackground|**_REMOVED_**|SurfaceBrush

-### PasswordBox
+#### PasswordBox

 Old Key|New Key|Value
 -|-|-
 MaterialDisabledOutlinedPasswordBoxBorderBrush|**_REMOVED_**|OnSurfaceColor*0.12
 MaterialRevealGlyphPathData|**_REMOVED_**|M11 0.5C6 0.5 1.73 3.61 0 8C1.73 12.39 6 15.5 11 15.5C16 15.5 20.27 12.39 22 8C20.27 3.61 16 0.5 11 0.5ZM11 13C8.24 13 6 10.76 6 8C6 5.24 8.24 3 11 3C13.76 3 16 5.24 16 8C16 10.76 13.76 13 11 13ZM11 5C9.34 5 8 6.34 8 8C8 9.66 9.34 11 11 11C12.66 11 14 9.66 14 8C14 6.34 12.66 5 11 5Z

-### PipsPager
+#### PipsPager

 Old Key|New Key|Value
 -|-|-
@ -274,14 +276,14 @@ MaterialPipsPagerVerticalOrientationButtonWidth|**_REMOVED_**|12
 MaterialPipsPagerHorizontalOrientationButtonHeight|**_REMOVED_**|12
 MaterialPipsPagerHorizontalOrientationButtonWidth|**_REMOVED_**|12

-### ProgressBar
+#### ProgressBar

 Old Key|New Key|Value
 -|-|-
 MaterialProgressBarHeight|**_REMOVED_**|4
 MaterialProgressBarMinWidth|**_REMOVED_**|250

-### ProgressRing
+#### ProgressRing

 Old Key|New Key|Value
 -|-|-
@ -290,7 +292,7 @@ M3MaterialDeterminateAnimation_Uno|**_REMOVED_**|embedded://Uno.Material/Uno.Mat
 M3MaterialIndeterminateAnimation_Win|**_REMOVED_**|ms-appx:///Uno.Material/Assets/MaterialIndeterminate.json
 M3MaterialDeterminateAnimation_Win|**_REMOVED_**|ms-appx:///Uno.Material/Assets/MaterialDeterminate.json

-### RadioButton
+#### RadioButton

 Old Key|New Key|Value
 -|-|-
@ -299,7 +301,7 @@ RadioCheckAreaSize|**_REMOVED_**|20
 RadioStatesAreaSize|**_REMOVED_**|40
 RadioStatesAreaLength|**_REMOVED_**|40

-### Slider
+#### Slider

 Old Key|New Key|Value
 -|-|-
@ -309,14 +311,14 @@ MaterialSliderTickBarFillDisabled|**_REMOVED_**|SystemControlDisabledBaseMediumL
 MaterialSliderTickBarFill|**_REMOVED_**|OnSecondaryLowBrush
 MaterialSliderTrackBrush|**_REMOVED_**|MaterialSliderTrackColor

-### TextBox
+#### TextBox

 Old Key|New Key|Value
 -|-|-
 MaterialDisabledOutlinedTextBoxBorderBrush|**_REMOVED_**|OnSurfaceColor*0.12
 M3ClearGlyphPathData|**_REMOVED_**|M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM10 18C5.59 18 2 14.41 2 10C2 5.59 5.59 2 10 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 10 18ZM10 8.59L13.59 5L15 6.41L11.41 10L15 13.59L13.59 15L10 11.41L6.41 15L5 13.59L8.59 10L5 6.41L6.41 5L10 8.59Z

-### ToggleButton
+#### ToggleButton

 Old Key|New Key|Value
 -|-|-
@ -325,7 +327,7 @@ MaterialToggleButtonBorderRadius|**_REMOVED_**|4
 MaterialToggleButtonForegroundThemeBrush|**_REMOVED_**|OnSurfaceBrush
 MaterialToggleButtonTextLabelBrush|**_REMOVED_**|PrimaryColor

-### ToggleSwitch
+#### ToggleSwitch

 Old Key|New Key|Value
 -|-|-
@ -338,64 +340,69 @@ MaterialToggleSwitchOnBackgroundBrush|**_REMOVED_**|PrimaryVariantLightBrush
 MaterialToggleSwitchOnButtonBrush|**_REMOVED_**|PrimaryBrush
 MaterialToggleSwitchHeaderMargin|**_REMOVED_**|0,0,12,0

-# Updating to Uno.Material v2
+## Updating to Uno.Material v2
+
 Starting with version 2.0.0 of the [Uno.Material](https://www.nuget.org/packages/Uno.Material/2.0.0) and [Uno.Material.WinUI](https://www.nuget.org/packages/Uno.Material.WinUI/2.0.0) packages, users can now take advantage of the new [Material Design 3](https://m3.material.io/) design system from Google.
-Along with the new Material Design 3 styles, our Uno.Material NuGet packages will continue to support the previous Material Design 2 styles. In order to achieve this backward compatibility, we have had to make some changes to the way Uno.Material is initialized within your `App.xaml`. 
+Along with the new Material Design 3 styles, our Uno.Material NuGet packages will continue to support the previous Material Design 2 styles. In order to achieve this backward compatibility, we have had to make some changes to the way Uno.Material is initialized within your `App.xaml`.

 > [!NOTE]
 > In order to avoid any confusion going forward in this article, we will be referring to the new collection of Material Design 3 styles as the "v2" styles and the previous collection of Material Design 2 styles will be referred to as the "v1" styles.

- There are two available paths once you have updated to the new Uno.Material v2 package: 
+ There are two available paths once you have updated to the new Uno.Material v2 package:

 - Continue to keep using the v1 styles; or,
 - Migrate app to reference the new v2 styles

-## Continue Using v1 Styles
+### Continue Using v1 Styles
+
 > [!WARNING]
 > In order to continue using the v1 styles, some changes are required in your `App.xaml`.

 The Uno.Material v2 NuGet package contains both sets of v1 and v2 styles. Within your `App.xaml`, you will need to replace the references to `MaterialColors` and `MaterialResouces` with `MaterialColorsV1` and `MaterialResourcesV1`. `MaterialFonts` remains unchanged.

-## Migrating to v2 Styles
+### Migrating to v2 Styles
+
 Both `MaterialColors` and `MaterialResources` will now always initialize the latest version of the Material styles. It is also possible to directly reference the `MaterialColorsV2` and `MaterialResourcesV2` ResourceDictionaries if needed.

 The v2 styles introduce a new naming system for its resource keys. Refer to the [Material Styles Matrix](material-controls-styles.md) for the updated style keys. In addition to the new style keys, the Uno.Material color palette and text resources have also been updated to align with the [Material Design 3 Color System](https://m3.material.io/styles/color/the-color-system/key-colors-tones) and the [Material Design 3 Typography Guidelines](https://m3.material.io/styles/typography/type-scale-tokens).

-### Color Update
+#### Color Update
+
 A new color palette has been created for v2, meaning any color palette overrides ResourceDictionary in your app must be updated with the new resource keys. An example of the new color palette can be seen in the new [Uno.Material default palette](https://github.com/unoplatform/Uno.Themes/blob/master/src/library/Uno.Material/Styles/Application/v2/SharedColorPalette.xaml). For more information on the updated colors, you can refer to the "Colors and Themes" section of the [Material 3 Migration Guide](https://material.io/blog/migrating-material-3).

 > [!NOTE]
 > As of v2, the Brush resources have been relocated to ThemeDictionaries. To reference these Brush resources, use the `ThemeResource` binding.
 > More information on theme resources can be found [here](https://learn.microsoft.com/en-us/windows/apps/design/style/xaml-theme-resources)

- ### Typography Updates
+#### Typography Updates
+
 Text styles have also been modified in v2. There are no 1-to-1 mapping between v1 and v2 text styles in terms of font-sizes and usages. The "Typography" section of the [Material 3 Migration Guide](https://material.io/blog/migrating-material-3) can be helpful for choosing the right style.

 Below is a table that is not a strict guideline, but, is provided to you as a suggestion of mapping text styles from v1 to v2:

-| Previous Style     	| New Style               	|
-|--------------------	|-------------------------	|
-| MaterialHeadline1  	| MaterialDisplaySmall    	|
-| MaterialHeadline2  	| MaterialHeadlineLarge   	|
-| MaterialHeadline3  	| MaterialHeadlineMedium  	|
-| MaterialHeadline4  	| MaterialHeadlineSmall   	|
-| MaterialHeadline5  	| MaterialTitleLarge      	|
-| MaterialSubtitle1  	| MaterialTitleMedium     	|
-| MaterialSubtitle2  	| MaterialTitleSmall      	|
-| MaterialBody1      	| MaterialBodyLarge       	|
-| MaterialBody2      	| MaterialBodyMedium      	|
-| MaterialCaption    	| MaterialBodySmall       	|
-| MaterialButtonText 	| MaterialLabelLarge      	|
-| MaterialOverline   	| MaterialLabelMedium     	|
-| N/A                	| MaterialLabelSmall      	|
-| N/A                	| MaterialLabelExtraSmall 	|
-| N/A                	| MaterialCaptionLarge    	|
-| N/A                	| MaterialCaptionMedium   	|
-| N/A                	| MaterialCaptionSmall    	|
-| N/A                	| MaterialDisplayLarge    	|
-| N/A                	| MaterialDisplayMedium   	|
+| Previous Style     | New Style               |
+|--------------------|-------------------------|
+| MaterialHeadline1  | MaterialDisplaySmall    |
+| MaterialHeadline2  | MaterialHeadlineLarge   |
+| MaterialHeadline3  | MaterialHeadlineMedium  |
+| MaterialHeadline4  | MaterialHeadlineSmall   |
+| MaterialHeadline5  | MaterialTitleLarge      |
+| MaterialSubtitle1  | MaterialTitleMedium     |
+| MaterialSubtitle2  | MaterialTitleSmall      |
+| MaterialBody1      | MaterialBodyLarge       |
+| MaterialBody2      | MaterialBodyMedium      |
+| MaterialCaption    | MaterialBodySmall       |
+| MaterialButtonText | MaterialLabelLarge      |
+| MaterialOverline   | MaterialLabelMedium     |
+| N/A                | MaterialLabelSmall      |
+| N/A                | MaterialLabelExtraSmall |
+| N/A                | MaterialCaptionLarge    |
+| N/A                | MaterialCaptionMedium   |
+| N/A                | MaterialCaptionSmall    |
+| N/A                | MaterialDisplayLarge    |
+| N/A                | MaterialDisplayMedium   |

-### Notable Style Key Changes
+#### Notable Style Key Changes

 Control|Previous Style Key|New Style Key|
 -|-|-
@ -403,7 +410,7 @@ Button|MaterialButtonIconStyle|MaterialIconButtonStyle|
 Button|MaterialContainedButtonStyle|MaterialFilledButtonStyle|
 ToggleButton|MaterialToggleButtonIconStyle|MaterialIconToggleButtonStyle|

-### Notable Package Changes
+#### Notable Package Changes

 Namespace|Previous Package|New Package|
 -|-|-
--- a/doc/styles/Button.md
+++ b/doc/styles/Button.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.Button
+---
+
 # Button Control
+
 ## Styles

 Style Key|IsDefaultStyle*
@ -177,4 +182,4 @@ ElevatedButtonMargin|Thickness|0,0,0,1
 ElevatedButtonDisabledMargin|Thickness|0
 ButtonContentMargin|Thickness|8,0
 ButtonMargin|Thickness|0
-ButtonCornerRadius|CornerRadius|20
+ButtonCornerRadius|CornerRadius|20
--- a/doc/styles/CalendarDatePicker.md
+++ b/doc/styles/CalendarDatePicker.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.CalendarDatePicker
+---
+
 # CalendarDatePicker Control
+
 ## Styles

 Style Key|IsDefaultStyle*
@ -41,4 +46,4 @@ CalendarDatePickerBorderBrushPressed|SolidColorBrush|OnSurfaceLowBrush
 CalendarDatePickerBorderBrushDisabled|SolidColorBrush|OnSurfaceLowBrush
 CalendarDatePickerBottomBorderBrush|SolidColorBrush|PrimaryBrush
 CalendarDatePickerHeaderStyle|Style|MaterialBodySmall
-CalendarDatePickerTextStyle|Style|MaterialBodyMedium
+CalendarDatePickerTextStyle|Style|MaterialBodyMedium
--- a/doc/styles/CheckBox.md
+++ b/doc/styles/CheckBox.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.CheckBox
+---
+
 # CheckBox Control
+
 ## Styles

 Style Key|IsDefaultStyle*
@ -99,4 +104,4 @@ CheckBoxCheckAreaSize|Double|18
 CheckBoxCheckAreaLength|GridLength|40
 CheckBoxCheckAreaCornerRadius|CornerRadius|2
 CheckBoxCheckAreaBorderThickness|Thickness|2
-CheckBoxCheckAreaPadding|Thickness|8,0,0,0
+CheckBoxCheckAreaPadding|Thickness|8,0,0,0
--- a/doc/styles/ComboBox.md
+++ b/doc/styles/ComboBox.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.ComboBox
+---
+
 # ComboBox Control
+
 ## Styles

 Style Key|IsDefaultStyle*
@ -100,4 +105,4 @@ ComboBoxUpGlyphMargin|Thickness|7,0
 ComboBoxLeadingIconMargin|Thickness|2,0,18,0
 ComboBoxBorderThickness|Thickness|1
 ComboBoxOpenedBorderThickness|Thickness|2
-ComboBoxPadding|Thickness|16,0
+ComboBoxPadding|Thickness|16,0
--- a/doc/styles/DatePicker.md
+++ b/doc/styles/DatePicker.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.DatePicker
+---
+
 # DatePicker Control
+
 ## Styles

 Style Key|IsDefaultStyle*
@ -54,4 +59,4 @@ DatePickerButtonPlaceholderMargin|Thickness|4,0,0,0
 DatePickerButtonContentMargin|Thickness|6,24,10,0
 DatePickerHostPadding|Thickness|24,24,8,8
 DatePickerFlyoutButtonPadding|Thickness|0
-DatePickerCornerRadius|CornerRadius|4,4,0,0
+DatePickerCornerRadius|CornerRadius|4,4,0,0
--- a/doc/styles/FloatingActionButton.md
+++ b/doc/styles/FloatingActionButton.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.FloatingActionButton
+---
+
 # FloatingActionButton Control
+
 ## Styles

 Style Key|IsDefaultStyle*
@ -72,4 +77,4 @@ FabTertiaryBackgroundDisabled|SolidColorBrush|SystemControlTransparentBrush
 FabTertiaryStateOverlayBackgroundPointerOver|SolidColorBrush|SystemControlTransparentBrush
 FabTertiaryStateOverlayBackgroundFocused|SolidColorBrush|SystemControlTransparentBrush
 FabTertiaryStateOverlayBackgroundPressed|SolidColorBrush|SystemControlTransparentBrush
-FabTertiaryStateOverlayBackgroundDisabled|SolidColorBrush|OnSurfaceDisabledLowBrush
+FabTertiaryStateOverlayBackgroundDisabled|SolidColorBrush|OnSurfaceDisabledLowBrush
--- a/doc/styles/HyperlinkButton.md
+++ b/doc/styles/HyperlinkButton.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.HyperlinkButton
+---
+
 # HyperlinkButton Control
+
 ## Styles

 Style Key|IsDefaultStyle*
--- a/doc/styles/NavigationView.md
+++ b/doc/styles/NavigationView.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.NavigationView
+---
+
 # NavigationView Control
+
 ## Styles

 Style Key|IsDefaultStyle*
--- a/doc/styles/PasswordBox.md
+++ b/doc/styles/PasswordBox.md
@ -1,4 +1,9 @@
-# PasswordBox Control
+---
+uid: Uno.Themes.Styles.PasswordBox
+---
+
+# PasswordBox Control
+
 ## Styles

 Style Key|IsDefaultStyle*
@ -72,4 +77,4 @@ OutlinedPasswordBoxBorderPaddingFocused|Thickness|0
 OutlinedPasswordBoxPadding|Thickness|16,4,8,4
 OutlinedPasswordBoxBorderThickness|Thickness|1
 OutlinedPasswordBoxBorderThicknessPointerOver|Thickness|2
-OutlinedPasswordBoxBorderThicknessFocused|Thickness|2
+OutlinedPasswordBoxBorderThicknessFocused|Thickness|2
--- a/doc/styles/PipsPager.md
+++ b/doc/styles/PipsPager.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.PipsPager
+---
+
 # PipsPager Control
+
 ## Styles

 Style Key|IsDefaultStyle*
--- a/doc/styles/ProgressBar.md
+++ b/doc/styles/ProgressBar.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.ProgressBar
+---
+
 # ProgressBar Control
+
 ## Styles

 Style Key|IsDefaultStyle*
--- a/doc/styles/ProgressRing.md
+++ b/doc/styles/ProgressRing.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.ProgressRing
+---
+
 # ProgressRing Control
+
 ## Styles

 Style Key|IsDefaultStyle*
@ -12,4 +17,4 @@ IsDefaultStyle*: Styles in this column will be set as the default implicit style
 Key|Type|Value
 -|-|-
 ProgressRingForeground|SolidColorBrush|PrimaryBrush
-ProgressRingBackground|SolidColorBrush|SystemControlTransparentBrush
+ProgressRingBackground|SolidColorBrush|SystemControlTransparentBrush
--- a/doc/styles/RadioButton.md
+++ b/doc/styles/RadioButton.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.RadioButton
+---
+
 # RadioButton Control
+
 ## Styles

 Style Key|IsDefaultStyle*
@ -48,4 +53,4 @@ RadioButtonMinHeight|Double|40
 RadioButtonMinWidth|Double|40
 RadioButtonStrokeThickness|Double|2
 RadioButtonPadding|Thickness|4,0,0,0
-RadioButtonCheckEllipsePadding|Thickness|5
+RadioButtonCheckEllipsePadding|Thickness|5
--- a/doc/styles/RatingControl.md
+++ b/doc/styles/RatingControl.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.RatingControl
+---
+
 # RatingControl Control
+
 ## Styles

 Style Key|IsDefaultStyle*
--- a/doc/styles/Slider.md
+++ b/doc/styles/Slider.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.Slider
+---
+
 # Slider Control
+
 ## Styles

 Style Key|IsDefaultStyle*
@ -44,4 +49,4 @@ SliderThumbHeight|Double|20
 SliderThumbCornerRadius|Double|10
 SliderTrackCornerRadius|CornerRadius|ControlCornerRadius
 SliderHorizontalFocusVisualMargin|Thickness|-14,-6
-SliderVerticalFocusVisualMargin|Thickness|-6,-14
+SliderVerticalFocusVisualMargin|Thickness|-6,-14
--- a/doc/styles/TextBlock.md
+++ b/doc/styles/TextBlock.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.TextBlock
+---
+
 # TextBlock Control
+
 ## Styles

 Style Key|IsDefaultStyle*
--- a/doc/styles/TextBox.md
+++ b/doc/styles/TextBox.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.TextBox
+---
+
 # TextBox Control
+
 ## Styles

 Style Key|IsDefaultStyle*
--- a/doc/styles/ToggleButton.md
+++ b/doc/styles/ToggleButton.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.ToggleButton
+---
+
 # ToggleButton Control
+
 ## Styles

 Style Key|IsDefaultStyle*
@ -103,4 +108,4 @@ IconToggleButtonStateCircleOpacityPressed|Double|PressedOpacity
 IconToggleButtonStateCircleOpacityFocused|Double|FocusedOpacity
 IconToggleButtonBorderThickness|Thickness|0
 IconToggleButtonMinHeight|Double|40
-IconToggleButtonMinWidth|Double|40
+IconToggleButtonMinWidth|Double|40
--- a/doc/styles/ToggleSwitch.md
+++ b/doc/styles/ToggleSwitch.md
@ -1,4 +1,9 @@
+---
+uid: Uno.Themes.Styles.ToggleSwitch
+---
+
 # ToggleSwitch Control
+
 ## Styles

 Style Key|IsDefaultStyle*
@ -60,4 +65,4 @@ KnobOnMargin|Thickness|2,0,0,0
 SwitchKnobOnMargin|Thickness|26,0,0,0
 SwitchKnobOffMargin|Thickness|0,0,22,0
 SwitchKnobOnShadowMargin|Thickness|20,0,0,0
-SwitchKnobOffShadowMargin|Thickness|0,0,20,0
+SwitchKnobOffShadowMargin|Thickness|0,0,20,0
--- a/doc/themes-overview.md
+++ b/doc/themes-overview.md
@ -1,9 +1,13 @@
-<p align="center">
-  <img src="assets/themes-design-systems.png">
-</p>
+---
+uid: Uno.Themes.Overview
+---

 # Themes Overview

+<p align="center">
+  <img src="assets/themes-design-systems.png" alt="Themes design systems" />
+</p>
+
 ## Summary

 - [Material Overview](material-getting-started.md)
@ -11,12 +15,13 @@
 - [Fluent Overview](fluent-getting-started.md)

 ## Uno Themes Styles
+
 [Uno.Themes](https://github.com/unoplatform/Uno.Themes) is the repository for add-ons NuGet packages that can be added to any new or existing Uno solution.

 It contains two libraries:

 - `Uno.Material` library is designed to help you use [Material Design 3](https://m3.material.io/)
- `Uno.Cupertino` library is designed to help you use [Human Interface Guideline styling](https://developer.apple.com/design/human-interface-guidelines) 
+- `Uno.Cupertino` library is designed to help you use [Human Interface Guideline styling](https://developer.apple.com/design/human-interface-guidelines)

 Both libraries help you style your application with a few lines of code include and include:

@ -25,4 +30,4 @@ Both libraries help you style your application with a few lines of code include

 ## Fluent Controls Styles

-Uno Platform 3.0 and above supports control styles conforming to the [Fluent design system](https://www.microsoft.com/design/fluent).
+Uno Platform 3.0 and above supports control styles conforming to the [Fluent design system](https://www.microsoft.com/design/fluent).