Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add migration for lightweight styling #839

Merged
merged 1 commit into from
Sep 14, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions doc/material-migration.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,86 @@
---
uid: Toolkit.Migration.Material2.0
---

# Updating to Material Toolkit v4

Material Toolkit v4 introduces support for [Lightweight Styling](lightweight-styling.md) and, as a result, 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).

Along with the above list of new resource keys, below is a list of the resource keys that have been removed or renamed.

> [!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).
### Chip

Old Key|New Key|Value
-|-|-
MaterialChipElevationMargin|ChipElevationMargin|4
MaterialChipCornerRadius|ChipCornerRadius|8
MaterialChipIconSize|ChipIconSize|18
MaterialChipElevation|ChipElevation|4
M3MateriaChipCheckGlyphSize|**_REMOVED_**|20
MaterialChipBorderThickness|ChipBorderThickness|1
MaterialChipDeleteIconLength|ChipDeleteIconLength|11
MaterialChipDeleteIconContainerLength|ChipDeleteIconContainerLength|18
MaterialChipSize|ChipSize|12
MaterialChipContentMinHeight|ChipContentMinHeight|20
MaterialChipHeight|ChipHeight|32
MaterialChipDisabledBorderBrush|ChipBorderBrushDisabled|OnSurfaceVariantDisabledLowBrush
MaterialChipDisabledBackground|ChipBackgroundDisabled|OnSurfaceDisabledLowBrush
MaterialChipDisabledForeground|ChipForegroundDisabled|OnSurfaceDisabledBrush
MaterialChipIconDisabledForeground|ChipIconForegroundDisabled|OnSurfaceDisabledBrush
MaterialChipIconForeground|ChipIconForeground|PrimaryBrush
MaterialChipSelectedPressedForeground|**_REMOVED_**|OnSecondaryContainerBrush
MaterialChipSelectedFocusedForeground|**_REMOVED_**|OnSecondaryContainerBrush
MaterialChipSelectedPointerOverForeground|**_REMOVED_**|OnSecondaryContainerBrush
MaterialChipSelectedForeground|**_REMOVED_**|OnSecondaryContainerBrush
MaterialChipPressedForeground|ChipForegroundPressed|OnSurfaceVariantBrush
MaterialChipFocusedForeground|ChipForegroundFocused|OnSurfaceVariantBrush -> SystemControlTransparentBrush
MaterialChipPointerOverForeground|ChipForegroundPointerOver|OnSurfaceVariantBrush
MaterialChipForeground|ChipForeground|OnSurfaceVariantBrush
MaterialChipSelectedPressedStateOverlay|**_REMOVED_**|OnSecondaryContainerSelectedBrush
MaterialChipSelectedFocusedStateOverlay|**_REMOVED_**|OnSecondaryContainerFocusedBrush
MaterialChipSelectedPointerOverStateOverlay|**_REMOVED_**|OnSecondaryContainerHoverBrush
MaterialChipPressedStateOverlay|ChipStateOverlayPressed|OnSurfaceVariantPressedBrush
MaterialChipFocusedStateOverlay|ChipStateOverlayFocused|OnSurfaceVariantFocusedBrush -> SystemControlTransparentBrush
MaterialChipPointerOverStateOverlay|ChipStateOverlayPointerOver|OnSurfaceVariantHoverBrush
MaterialChipSelectedBackground|**_REMOVED_**|SecondaryContainerBrush
MaterialChipBackground|ChipBackground|SystemControlTransparentBrush

### Divider

Old Key|New Key|Value
-|-|-
MaterialDividerHeight|DividerHeight|1

### TabBar

Old Key|New Key|Value
-|-|-
MaterialNavigationTabBarItemLargeBadgeCornerRadius|NavigationTabBarItemLargeBadgeCornerRadius|8
MaterialNavigationTabBarItemLargeBadgePadding|NavigationTabBarItemLargeBadgePadding|4,0
MaterialNavigationTabBarItemLargeBadgeMargin|NavigationTabBarItemLargeBadgeMargin|32,2,0,0
MaterialNavigationTabBarItemLargeBadgeMinWidth|NavigationTabBarItemLargeBadgeMinWidth|16
MaterialNavigationTabBarItemLargeBadgeHeight|NavigationTabBarItemLargeBadgeHeight|16
MaterialNavigationTabBarItemSmallBadgeMargin|NavigationTabBarItemSmallBadgeMargin|0,4,20,0
MaterialNavigationTabBarItemSmallBadgeWidth|NavigationTabBarItemSmallBadgeWidth|6
MaterialNavigationTabBarItemSmallBadgeHeight|NavigationTabBarItemSmallBadgeHeight|6
MaterialFabTabBarItemPadding|FabTabBarItemPadding|20
MaterialFabTabBarItemCornerRadius|FabTabBarItemCornerRadius|16
MaterialFabTabBarItemIconTextPadding|FabTabBarItemIconTextPadding|12
MaterialFabTabBarItemContentWidthOrHeight|FabTabBarItemContentWidthOrHeight|16
MaterialFabTabBarItemOffset|FabTabBarItemOffset|-32
MaterialTopTabBarItemContentMargin|TopTabBarItemContentMargin|0
MaterialTopTabBarItemIconHeight|TopTabBarItemIconHeight|20
MaterialTopTabBarHeight|TopTabBarHeight|48
MaterialNavigationTabBarItemActiveIndicatorCornerRadius|NavigationTabBarItemActiveIndicatorCornerRadius|16
MaterialNavigationTabBarItemPadding|NavigationTabBarItemPadding|0,12,0,16
MaterialNavigationTabBarItemActiveIndicatorHeight|NavigationTabBarItemActiveIndicatorHeight|32
MaterialNavigationTabBarItemActiveIndicatorWidth|NavigationTabBarItemActiveIndicatorWidth|64
MaterialNavigationTabBarItemIconHeight|NavigationTabBarItemIconHeight|18
MaterialNavigationTabBarWidthOrHeight|NavigationTabBarWidthOrHeight|80

# Updating Material Toolkit to Uno Material v2
Starting with version 2.0.0 of the [Uno.Toolkit.UI.Material](https://www.nuget.org/packages/Uno.Toolkit.UI.Material/2.0.0) and [Uno.Toolkit.WinUI.Material](https://www.nuget.org/packages/Uno.Toolkit.WinUI.Material/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 Material Toolkit 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 the Material toolkit is initialized within your `App.xaml`.
Expand Down
Loading