From 657bfbac917e1ac60afbcf19ed283a311fffb9aa Mon Sep 17 00:00:00 2001 From: agneszitte Date: Wed, 13 Dec 2023 17:17:46 -0500 Subject: [PATCH] docs: Fixes after Lint markdown files was enabled --- README.md | 2 +- doc/cupertino-controls-styles.md | 5 ++ doc/cupertino-getting-started.md | 10 +-- doc/fluent-getting-started.md | 42 ++++++----- doc/lightweight-styling.md | 11 +-- doc/material-colors.md | 5 +- doc/material-controls-extensions.md | 8 +- doc/material-controls-styles.md | 7 +- doc/material-dsp.md | 11 ++- doc/material-getting-started.md | 14 ++-- doc/material-migration.md | 113 +++++++++++++++------------- doc/styles/Button.md | 7 +- doc/styles/CalendarDatePicker.md | 7 +- doc/styles/CheckBox.md | 7 +- doc/styles/ComboBox.md | 7 +- doc/styles/DatePicker.md | 7 +- doc/styles/FloatingActionButton.md | 7 +- doc/styles/HyperlinkButton.md | 5 ++ doc/styles/NavigationView.md | 5 ++ doc/styles/PasswordBox.md | 9 ++- doc/styles/PipsPager.md | 5 ++ doc/styles/ProgressBar.md | 5 ++ doc/styles/ProgressRing.md | 7 +- doc/styles/RadioButton.md | 7 +- doc/styles/RatingControl.md | 5 ++ doc/styles/Slider.md | 7 +- doc/styles/TextBlock.md | 5 ++ doc/styles/TextBox.md | 5 ++ doc/styles/ToggleButton.md | 7 +- doc/styles/ToggleSwitch.md | 7 +- doc/themes-overview.md | 15 ++-- 31 files changed, 250 insertions(+), 114 deletions(-) diff --git a/README.md b/README.md index e6588f85..59b31fa3 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Uno.Themes

- + Themes design systems

[![Open Uno.Themes in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/unoplatform/uno.themes) diff --git a/doc/cupertino-controls-styles.md b/doc/cupertino-controls-styles.md index efca0f3c..b3752f25 100644 --- 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
CupertinoContainedButtonStyle
CupertinoDatePickerFlyoutButtonStyle diff --git a/doc/cupertino-getting-started.md b/doc/cupertino-getting-started.md index 2bcfcf14..83e4c980 100644 --- 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 --- -

- -

- # Uno.Cupertino +

+ Cupertino design system +

+ 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 diff --git a/doc/fluent-getting-started.md b/doc/fluent-getting-started.md index 3af1e2be..4c8d58e3 100644 --- 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 --- -

- -

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

+ Fluent design system +

+ +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 - - + + - - - + + + ``` + Or, if you have other existing application-scope resources, add `XamlControlsResources` at the top (before other resources) as a merged dictionary: ```xml - - - + + + - - - - - - + + + + + + ``` 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*. diff --git a/doc/lightweight-styling.md b/doc/lightweight-styling.md index 82f56022..d6dc2959 100644 --- 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` diff --git a/doc/material-colors.md b/doc/material-colors.md index 1329f983..dc03c825 100644 --- 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 | diff --git a/doc/material-controls-extensions.md b/doc/material-controls-extensions.md index cb813129..15ae3501 100644 --- 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 diff --git a/doc/material-controls-styles.md b/doc/material-controls-styles.md index b612ec3a..4a37892c 100644 --- 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 diff --git a/doc/material-dsp.md b/doc/material-dsp.md index da49f71a..43d46170 100644 --- 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 > 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 ``` * 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. diff --git a/doc/material-getting-started.md b/doc/material-getting-started.md index f8bb1c67..7fd1561f 100644 --- 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 --- -

- -

- # Uno.Material +

+ Material design system +

+ 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`: diff --git a/doc/material-migration.md b/doc/material-migration.md index df75c871..bb05aac1 100644 --- 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| -|-|- diff --git a/doc/styles/Button.md b/doc/styles/Button.md index 7b82357c..557f7f38 100644 --- 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 \ No newline at end of file +ButtonCornerRadius|CornerRadius|20 diff --git a/doc/styles/CalendarDatePicker.md b/doc/styles/CalendarDatePicker.md index 3f748e78..82d5cd9f 100644 --- 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 \ No newline at end of file +CalendarDatePickerTextStyle|Style|MaterialBodyMedium diff --git a/doc/styles/CheckBox.md b/doc/styles/CheckBox.md index f148add8..ff95fa9f 100644 --- 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 \ No newline at end of file +CheckBoxCheckAreaPadding|Thickness|8,0,0,0 diff --git a/doc/styles/ComboBox.md b/doc/styles/ComboBox.md index 5781b1cf..77562685 100644 --- 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 \ No newline at end of file +ComboBoxPadding|Thickness|16,0 diff --git a/doc/styles/DatePicker.md b/doc/styles/DatePicker.md index ffbc7f5f..5dbc28ca 100644 --- 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 \ No newline at end of file +DatePickerCornerRadius|CornerRadius|4,4,0,0 diff --git a/doc/styles/FloatingActionButton.md b/doc/styles/FloatingActionButton.md index e343b7dd..59b6ad25 100644 --- 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 \ No newline at end of file +FabTertiaryStateOverlayBackgroundDisabled|SolidColorBrush|OnSurfaceDisabledLowBrush diff --git a/doc/styles/HyperlinkButton.md b/doc/styles/HyperlinkButton.md index d1553665..1be24d98 100644 --- 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* diff --git a/doc/styles/NavigationView.md b/doc/styles/NavigationView.md index 288be95e..61b17c3e 100644 --- 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* diff --git a/doc/styles/PasswordBox.md b/doc/styles/PasswordBox.md index 3f423a76..014cfff0 100644 --- 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 \ No newline at end of file +OutlinedPasswordBoxBorderThicknessFocused|Thickness|2 diff --git a/doc/styles/PipsPager.md b/doc/styles/PipsPager.md index fd5653c7..911d994a 100644 --- 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* diff --git a/doc/styles/ProgressBar.md b/doc/styles/ProgressBar.md index 16be9229..cd4aaa03 100644 --- 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* diff --git a/doc/styles/ProgressRing.md b/doc/styles/ProgressRing.md index 1cd82507..d51804d3 100644 --- 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 \ No newline at end of file +ProgressRingBackground|SolidColorBrush|SystemControlTransparentBrush diff --git a/doc/styles/RadioButton.md b/doc/styles/RadioButton.md index 1bfba71b..35246e97 100644 --- 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 \ No newline at end of file +RadioButtonCheckEllipsePadding|Thickness|5 diff --git a/doc/styles/RatingControl.md b/doc/styles/RatingControl.md index 6baec07e..482d0ccb 100644 --- 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* diff --git a/doc/styles/Slider.md b/doc/styles/Slider.md index 1672d54d..23c38f3e 100644 --- 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 \ No newline at end of file +SliderVerticalFocusVisualMargin|Thickness|-6,-14 diff --git a/doc/styles/TextBlock.md b/doc/styles/TextBlock.md index 9874b81f..19a2aa5b 100644 --- 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* diff --git a/doc/styles/TextBox.md b/doc/styles/TextBox.md index fc24e36f..191aa2d4 100644 --- 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* diff --git a/doc/styles/ToggleButton.md b/doc/styles/ToggleButton.md index 5e963351..dd4ba62b 100644 --- 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 \ No newline at end of file +IconToggleButtonMinWidth|Double|40 diff --git a/doc/styles/ToggleSwitch.md b/doc/styles/ToggleSwitch.md index 5907901b..60a6b939 100644 --- 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 \ No newline at end of file +SwitchKnobOffShadowMargin|Thickness|0,0,20,0 diff --git a/doc/themes-overview.md b/doc/themes-overview.md index f9d6eeb7..fa0ba901 100644 --- a/doc/themes-overview.md +++ b/doc/themes-overview.md @@ -1,9 +1,13 @@ -

- -

+--- +uid: Uno.Themes.Overview +--- # Themes Overview +

+ Themes design systems +

+ ## 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). \ No newline at end of file +Uno Platform 3.0 and above supports control styles conforming to the [Fluent design system](https://www.microsoft.com/design/fluent).