docs: lightweight styling (#713)

(cherry picked from commit fe13f57)
unoplatform · Aug 17, 2023 · f26166c · f26166c
1 parent 5896d84
commit f26166c
Show file tree

Hide file tree

Showing 8 changed files with 391 additions and 2 deletions.
diff --git a/doc/assets/material-chip-pointerover-lightweight-styling.png b/doc/assets/material-chip-pointerover-lightweight-styling.png
diff --git a/doc/assets/material-lightweight-styling-anatomy.png b/doc/assets/material-lightweight-styling-anatomy.png
diff --git a/doc/controls/CardAndCardContentControl.md b/doc/controls/CardAndCardContentControl.md
@@ -89,6 +89,43 @@ xmlns:utu="using:Uno.Toolkit.UI"
 ### Examples
 ![](../assets/card-samples.png)
 
+## Lightweight Styling
+
+Key|Type|Value
+-|-|-
+ContentTemplateForeground|SolidColorBrush|OnSurfaceMediumBrush
+ContentTemplateBorderBrush|SolidColorBrush|OnSurfaceMediumBrush
+FilledCardBackground|SolidColorBrush|SurfaceBrush
+FilledCardBorderBrush|SolidColorBrush|SystemControlTransparentBrush
+FilledCardBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush
+FilledCardBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush
+AvatarFilledCardBackground|SolidColorBrush|SurfaceBrush
+AvatarFilledCardBorderBrush|SolidColorBrush|SystemControlTransparentBrush
+AvatarFilledCardBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush
+AvatarFilledCardBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush
+SmallMediaFilledCardBackground|SolidColorBrush|SurfaceBrush
+SmallMediaFilledCardBorderBrush|SolidColorBrush|SystemControlTransparentBrush
+SmallMediaFilledCardBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush
+SmallMediaFilledCardBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush
+OutlinedCardBackground|SolidColorBrush|SurfaceBrush
+OutlinedCardBorderBrush|SolidColorBrush|OutlineBrush
+AvatarOutlinedCardBackground|SolidColorBrush|SurfaceBrush
+AvatarOutlinedCardBorderBrush|SolidColorBrush|OutlineBrush
+SmallMediaOutlinedCardBackground|SolidColorBrush|SurfaceBrush
+SmallMediaOutlinedCardBorderBrush|SolidColorBrush|OutlineBrush
+ElevatedCardBackground|SolidColorBrush|SurfaceBrush
+ElevatedCardBorderBrush|SolidColorBrush|SystemControlTransparentBrush
+ElevatedCardBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush
+ElevatedCardBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush
+AvatarElevatedCardBackground|SolidColorBrush|SurfaceBrush
+AvatarElevatedCardBorderBrush|SolidColorBrush|SystemControlTransparentBrush
+AvatarElevatedCardBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush
+AvatarElevatedCardBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush
+SmallMediaElevatedCardBackground|SolidColorBrush|SurfaceBrush
+SmallMediaElevatedCardBorderBrush|SolidColorBrush|SystemControlTransparentBrush
+SmallMediaElevatedCardBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush
+SmallMediaElevatedCardBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush
+
 ## CardContentControl
 The `CardContentControl` is based on `ContentControl` and allows you to customize the entire content through `DataTemplate` to fit your needs.
 
@@ -171,3 +208,20 @@ xmlns:utu="using:Uno.Toolkit.UI"
 
 ### Examples
 ![](../assets/cardcontentcontrol-samples.png)
+
+## Lightweight Styling
+
+Key|Type|Value
+-|-|-
+FilledCardContentBackground|SolidColorBrush|SurfaceBrush
+FilledCardContentBorderBrush|SolidColorBrush|SystemControlTransparentBrush
+FilledCardContentBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush
+FilledCardContentBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush
+FilledCardContentBorderBrushPressed|SolidColorBrush|OnSurfacePressedBrush
+OutlinedCardContentBackground|SolidColorBrush|SurfaceBrush
+OutlinedCardContentBorderBrush|SolidColorBrush|OutlineBrush
+ElevatedCardContentBackground|SolidColorBrush|SurfaceBrush
+ElevatedCardContentBorderBrush|SolidColorBrush|SystemControlTransparentBrush
+ElevatedCardContentBorderBrushPointerOver|SolidColorBrush|OnSurfaceHoverBrush
+ElevatedCardContentBorderBrushFocused|SolidColorBrush|OnSurfaceFocusedBrush
+ElevatedCardContentBorderBrushPressed|SolidColorBrush|OnSurfacePressedBrush
diff --git a/doc/controls/ChipAndChipGroup.md b/doc/controls/ChipAndChipGroup.md
@@ -79,6 +79,81 @@ xmlns:utu="using:Uno.Toolkit.UI"
 </utu:Chip>
 ```
 
+## Lightweight Styling
+
+Key|Type|Value
+-|-|-
+ChipCheckGlyphSize|Double|20
+ChipContentMinHeight|Double|20
+ChipDeleteIconContainerLength|Double|18
+ChipDeleteIconLength|Double|11
+ChipElevation|Double|4
+ChipElevationDisabled|Double|0
+ChipHeight|Double|32
+ChipIconSize|Double|18
+ChipSize|Double|12
+ChipCornerRadius|CornerRadius|8
+ChipBorderThickness|Thickness|1
+ChipCheckGlyphPadding|Thickness|2
+ChipContentMargin|Thickness|8,0
+ChipElevationBorderThickness|Thickness|0
+ChipElevationMargin|Thickness|4
+ChipPadding|Thickness|8,0
+ChipBackground|SolidColorBrush|SystemControlTransparentBrush
+ChipBackgroundPointerOver|SolidColorBrush|SystemControlTransparentBrush
+ChipBackgroundFocused|SolidColorBrush|SystemControlTransparentBrush
+ChipBackgroundPressed|SolidColorBrush|SystemControlTransparentBrush
+ChipBackgroundDisabled|SolidColorBrush|OnSurfaceDisabledLowBrush
+ChipBackgroundChecked|SolidColorBrush|SecondaryContainerBrush
+ChipBackgroundCheckedPointerOver|SolidColorBrush|SecondaryContainerBrush
+ChipBackgroundCheckedFocused|SolidColorBrush|SystemControlTransparentBrush
+ChipBackgroundCheckedPressed|SolidColorBrush|SecondaryContainerBrush
+ChipBackgroundCheckedDisabled|SolidColorBrush|SystemControlTransparentBrush
+ChipForeground|SolidColorBrush|OnSurfaceVariantBrush
+ChipForegroundPointerOver|SolidColorBrush|OnSurfaceVariantBrush
+ChipForegroundFocused|SolidColorBrush|SystemControlTransparentBrush
+ChipForegroundPressed|SolidColorBrush|OnSurfaceVariantBrush
+ChipForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush
+ChipForegroundChecked|SolidColorBrush|OnSecondaryContainerBrush
+ChipForegroundCheckedPointerOver|SolidColorBrush|OnSecondaryContainerBrush
+ChipForegroundCheckedFocused|SolidColorBrush|SystemControlTransparentBrush
+ChipForegroundCheckedPressed|SolidColorBrush|OnSecondaryContainerBrush
+ChipForegroundCheckedDisabled|SolidColorBrush|SystemControlTransparentBrush
+ChipDeleteIconBackground|SolidColorBrush|SystemControlTransparentBrush
+ChipDeleteIconForeground|SolidColorBrush|OnSurfaceVariantBrush
+ChipIconForeground|SolidColorBrush|PrimaryBrush
+ChipIconForegroundPointerOver|SolidColorBrush|PrimaryBrush
+ChipIconForegroundFocused|SolidColorBrush|SystemControlTransparentBrush
+ChipIconForegroundPressed|SolidColorBrush|PrimaryBrush
+ChipIconForegroundDisabled|SolidColorBrush|OnSurfaceDisabledBrush
+ChipIconForegroundChecked|SolidColorBrush|PrimaryBrush
+ChipIconForegroundCheckedPointerOver|SolidColorBrush|PrimaryBrush
+ChipIconForegroundCheckedFocused|SolidColorBrush|SystemControlTransparentBrush
+ChipIconForegroundCheckedPressed|SolidColorBrush|PrimaryBrush
+ChipIconForegroundCheckedDisabled|SolidColorBrush|SystemControlTransparentBrush
+ChipBorderBrush|SolidColorBrush|OutlineBrush
+ChipBorderBrushPointerOver|SolidColorBrush|OutlineBrush
+ChipBorderBrushFocused|SolidColorBrush|SystemControlTransparentBrush
+ChipBorderBrushPressed|SolidColorBrush|OutlineBrush
+ChipBorderBrushDisabled|SolidColorBrush|OnSurfaceVariantDisabledLowBrush
+ChipBorderBrushChecked|SolidColorBrush|OutlineBrush
+ChipBorderBrushCheckedPointerOver|SolidColorBrush|OutlineBrush
+ChipBorderBrushCheckedFocused|SolidColorBrush|SystemControlTransparentBrush
+ChipBorderBrushCheckedPressed|SolidColorBrush|OutlineBrush
+ChipBorderBrushCheckedDisabled|SolidColorBrush|SystemControlTransparentBrush
+ChipStateOverlay|SolidColorBrush|SystemControlTransparentBrush
+ChipStateOverlayPointerOver|SolidColorBrush|OnSurfaceVariantHoverBrush
+ChipStateOverlayFocused|SolidColorBrush|SystemControlTransparentBrush
+ChipStateOverlayPressed|SolidColorBrush|OnSurfaceVariantPressedBrush
+ChipStateOverlayDisabled|SolidColorBrush|SystemControlTransparentBrush
+ChipStateOverlayChecked|SolidColorBrush|SecondaryContainerBrush
+ChipStateOverlayCheckedPointerOver|SolidColorBrush|OnSecondaryContainerHoverBrush
+ChipStateOverlayCheckedFocused|SolidColorBrush|SystemControlTransparentBrush
+ChipStateOverlayCheckedPressed|SolidColorBrush|OnSecondaryContainerSelectedBrush
+ChipStateOverlayCheckedDisabled|SolidColorBrush|SystemControlTransparentBrush
+ChipRippleFeedback|SolidColorBrush|OnSurfaceFocusedBrush
+ElevatedChipBackground|SolidColorBrush|SurfaceBrush
+
 ## ChipGroup
 `ChipGroup` is a specialized `ItemsControl` used to present a collection of `Chip`s.
 

diff --git a/doc/controls/NavigationBar.md b/doc/controls/NavigationBar.md
@@ -392,6 +392,51 @@ Remarks:
 
 Only supports `BitmapImage`
 
+## Lightweight Styling
+
+Key|Type|Value
+-|-|-
+NavigationBarCommandBarEllipsisIconForegroundDisabled|SolidColorBrush|TextFillColorDisabledBrush
+NavigationBarCommandBarBackgroundCompactOpenUp|SolidColorBrush|SurfaceBrush
+NavigationBarCommandBarBackgroundCompactOpenDown|SolidColorBrush|SurfaceBrush
+NavigationBarMainCommandForeground|SolidColorBrush|OnSurfaceBrush
+NavigationBarForeground|SolidColorBrush|OnSurfaceBrush
+NavigationBarBackground|SolidColorBrush|SurfaceBrush
+NavigationBarPadding|Thickness|4,0,0,0
+NavigationBarFontFamily|FontFamily|MaterialRegularFontFamily
+NavigationBarFontWeight|String|TitleLargeFontWeight
+NavigationBarFontSize|Double|TitleLargeFontSize
+MaterialModalNavigationBarMainCommandForeground|SolidColorBrush|OnSurfaceBrush
+MaterialModalNavigationBarForeground|SolidColorBrush|OnSurfaceBrush
+MaterialModalNavigationBarBackground|SolidColorBrush|SurfaceBrush
+MaterialPrimaryNavigationBarCommandBarEllipsisIconForegroundDisabled|SolidColorBrush|TextFillColorDisabledBrush
+MaterialPrimaryNavigationBarCommandBarBackgroundCompactOpenUp|SolidColorBrush|PrimaryBrush
+MaterialPrimaryNavigationBarCommandBarBackgroundCompactOpenDown|SolidColorBrush|PrimaryBrush
+MaterialPrimaryNavigationBarMainCommandForeground|SolidColorBrush|OnPrimaryBrush
+MaterialPrimaryNavigationBarForeground|SolidColorBrush|OnPrimaryBrush
+MaterialPrimaryNavigationBarBackground|SolidColorBrush|PrimaryBrush
+MaterialPrimaryAppBarButtonForeground|SolidColorBrush|OnPrimaryBrush
+MaterialPrimaryModalNavigationBarMainCommandForeground|SolidColorBrush|OnPrimaryBrush
+MaterialPrimaryModalNavigationBarForeground|SolidColorBrush|OnPrimaryBrush
+MaterialPrimaryModalNavigationBarBackground|SolidColorBrush|PrimaryBrush
+NavigationBarOverflowAppBarButtonForeground|SolidColorBrush|OnPrimaryBrush
+NavigationBarOverflowAppBarButtonBackground|SolidColorBrush|SolidColorBrush { Color = Transparent }
+NavigationBarEllipsisButtonForeground|SolidColorBrush|OnSurfaceBrush
+NavigationBarEllipsisButtonBackground|SolidColorBrush|SolidColorBrush { Color = Transparent }
+MaterialNavigationBarElevation|Double|4
+MaterialXamlNavigationBarHeight|Double|64
+MaterialNavigationBarHeight|Double|48
+MaterialNavigationBarContentMargin|Thickness|16,0,0,0
+MaterialAppBarEllipsisButtonInnerBorderMargin|Thickness|2,6,6,6
+NavigationBarMaterialEllipsisButtonFontFamily|FontFamily|MaterialRegularFontFamily
+NavigationBarMaterialEllipsisButtonFontWeight|FontWeight|SemiBold
+NavigationBarMaterialEllipsisButtonFontSize|Double|ControlContentThemeFontSize
+NavigationBarMaterialEllipsisButtonWidth|Double|AppBarExpandButtonThemeWidth
+NavBarAppBarButtonContentHeight|Double|24
+NavBarMainCommandAppBarButtonContentHeight|Double|16
+NavBarAppBarThemeCompactHeight|Double|56
+NavBarAppBarButtonPadding|Thickness|12,16
+NavBarAppBarButtonHasFlyoutChevronVisibility|Visibility|Collapsed
 
 ## Navigation