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.

Sign up for GitHub

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

Jump to bottom

docs: lightweight styling #713

Merged
merged 1 commit into from
Aug 17, 2023
Merged

docs: lightweight styling #713

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added doc/assets/material-chip-pointerover-lightweight-styling.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/assets/material-lightweight-styling-anatomy.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 54 additions & 0 deletions doc/controls/CardAndCardContentControl.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -171,3 +208,20 @@ xmlns:utu="using:Uno.Toolkit.UI"

### Examples
![](../assets/cardcontentcontrol-samples.png)

## Lightweight Styling
rajamatt marked this conversation as resolved.
Show resolved Hide resolved

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
75 changes: 75 additions & 0 deletions doc/controls/ChipAndChipGroup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,81 @@ xmlns:utu="using:Uno.Toolkit.UI"
</utu:Chip>
```

## Lightweight Styling
rajamatt marked this conversation as resolved.
Show resolved Hide resolved

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.

Expand Down
45 changes: 45 additions & 0 deletions doc/controls/NavigationBar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,6 +392,51 @@ Remarks:

Only supports `BitmapImage`

## Lightweight Styling
rajamatt marked this conversation as resolved.
Show resolved Hide resolved

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

Expand Down
Loading
Loading