refactor(PasswordBox): add missing lightweight styling keys (#1205)

unoplatform · Sep 22, 2023 · 7e9fdb0 · 7e9fdb0
1 parent d19569b
commit 7e9fdb0
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 15 deletions.
diff --git a/doc/styles/PasswordBox.md b/doc/styles/PasswordBox.md
@@ -38,6 +38,11 @@ FilledPasswordBoxFontFamily|FontFamily|MaterialMediumFontFamily
 FilledPasswordBoxFontWeight|String|BodyLargeFontWeight
 FilledPasswordBoxFontSize|Double|BodyLargeFontSize
 FilledPasswordBoxCharacterSpacing|Int32|BodyLargeCharacterSpacing
+FilledPasswordBoxCornerRadius|CornerRadius|4,4,0,0
+FilledPasswordBoxMinHeight|Double|56
+FilledPasswordBoxBorderHeightPointerOver|Double|2
+FilledPasswordBoxBorderHeightFocused|Double|2
+FilledPasswordBoxPadding|Thickness|16,4,8,4
 OutlinedPasswordBoxBackground|SolidColorBrush|SystemControlTransparentBrush
 OutlinedPasswordBoxBackgroundPointerOver|SolidColorBrush|SystemControlTransparentBrush
 OutlinedPasswordBoxBackgroundFocused|SolidColorBrush|SystemControlTransparentBrush
@@ -59,3 +64,12 @@ OutlinedPasswordBoxFontFamily|FontFamily|MaterialMediumFontFamily
 OutlinedPasswordBoxFontWeight|String|BodyLargeFontWeight
 OutlinedPasswordBoxFontSize|Double|BodyLargeFontSize
 OutlinedPasswordBoxCharacterSpacing|Int32|BodyLargeCharacterSpacing
+OutlinedPasswordBoxCornerRadius|CornerRadius|4
+OutlinedPasswordBoxMinHeight|Double|58
+OutlinedPasswordBoxBorderPadding|Thickness|1
+OutlinedPasswordBoxBorderPaddingPointerOver|Thickness|0
+OutlinedPasswordBoxBorderPaddingFocused|Thickness|0
+OutlinedPasswordBoxPadding|Thickness|16,4,8,4
+OutlinedPasswordBoxBorderThickness|Thickness|1
+OutlinedPasswordBoxBorderThicknessPointerOver|Thickness|2
+OutlinedPasswordBoxBorderThicknessFocused|Thickness|2
diff --git a/src/library/Uno.Material/Styles/Controls/v2/PasswordBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/PasswordBox.xaml
@@ -85,6 +85,22 @@
 			<StaticResource x:Key="OutlinedPasswordBoxFontSize" ResourceKey="BodyLargeFontSize" />
 			<StaticResource x:Key="OutlinedPasswordBoxCharacterSpacing" ResourceKey="BodyLargeCharacterSpacing" />
 			<!--#endregion-->
+
+			<CornerRadius x:Key="OutlinedPasswordBoxCornerRadius">4</CornerRadius>
+			<x:Double x:Key="OutlinedPasswordBoxMinHeight">58</x:Double>
+			<Thickness x:Key="OutlinedPasswordBoxBorderPadding">1</Thickness>
+			<Thickness x:Key="OutlinedPasswordBoxBorderThickness">1</Thickness>
+			<Thickness x:Key="OutlinedPasswordBoxPadding">16,4,8,4</Thickness>
+			<Thickness x:Key="OutlinedPasswordBoxBorderThicknessPointerOver">2</Thickness>
+			<Thickness x:Key="OutlinedPasswordBoxBorderPaddingPointerOver">0</Thickness>
+			<Thickness x:Key="OutlinedPasswordBoxBorderThicknessFocused">2</Thickness>
+			<Thickness x:Key="OutlinedPasswordBoxBorderPaddingFocused">0</Thickness>
+
+			<CornerRadius x:Key="FilledPasswordBoxCornerRadius">4,4,0,0</CornerRadius>
+			<x:Double x:Key="FilledPasswordBoxMinHeight">56</x:Double>
+			<x:Double x:Key="FilledPasswordBoxBorderHeightPointerOver">2</x:Double>
+			<x:Double x:Key="FilledPasswordBoxBorderHeightFocused">2</x:Double>
+			<Thickness x:Key="FilledPasswordBoxPadding">16,4,8,4</Thickness>
 		</ResourceDictionary>
 		<ResourceDictionary x:Key="Light">
 			<!--#region Glyph-->
@@ -99,7 +115,7 @@
 			<StaticResource x:Key="PasswordBoxLeadingIconForeground" ResourceKey="OnSurfaceVariantBrush" />
 			<StaticResource x:Key="PasswordBoxLeadingIconForegroundDisabled" ResourceKey="OnSurfaceLowBrush" />
 			<!--#endregion-->
-			
+
 			<!--#region MaterialFilledPasswordBoxStyle-->
 			<StaticResource x:Key="FilledPasswordBoxBackground" ResourceKey="SurfaceVariantBrush" />
 			<StaticResource x:Key="FilledPasswordBoxBackgroundPointerOver" ResourceKey="OnSurfaceVariantHoverBrush" />
@@ -163,6 +179,22 @@
 			<StaticResource x:Key="OutlinedPasswordBoxFontSize" ResourceKey="BodyLargeFontSize" />
 			<StaticResource x:Key="OutlinedPasswordBoxCharacterSpacing" ResourceKey="BodyLargeCharacterSpacing" />
 			<!--#endregion-->
+
+			<CornerRadius x:Key="OutlinedPasswordBoxCornerRadius">4</CornerRadius>
+			<x:Double x:Key="OutlinedPasswordBoxMinHeight">58</x:Double>
+			<Thickness x:Key="OutlinedPasswordBoxBorderPadding">1</Thickness>
+			<Thickness x:Key="OutlinedPasswordBoxBorderThickness">1</Thickness>
+			<Thickness x:Key="OutlinedPasswordBoxPadding">16,4,8,4</Thickness>
+			<Thickness x:Key="OutlinedPasswordBoxBorderThicknessPointerOver">2</Thickness>
+			<Thickness x:Key="OutlinedPasswordBoxBorderPaddingPointerOver">0</Thickness>
+			<Thickness x:Key="OutlinedPasswordBoxBorderThicknessFocused">2</Thickness>
+			<Thickness x:Key="OutlinedPasswordBoxBorderPaddingFocused">0</Thickness>
+
+			<CornerRadius x:Key="FilledPasswordBoxCornerRadius">4,4,0,0</CornerRadius>
+			<x:Double x:Key="FilledPasswordBoxMinHeight">56</x:Double>
+			<x:Double x:Key="FilledPasswordBoxBorderHeightPointerOver">2</x:Double>
+			<x:Double x:Key="FilledPasswordBoxBorderHeightFocused">2</x:Double>
+			<Thickness x:Key="FilledPasswordBoxPadding">16,4,8,4</Thickness>
 		</ResourceDictionary>
 	</ResourceDictionary.ThemeDictionaries>
 
@@ -211,9 +243,9 @@
 		<Setter Property="BorderBrush" Value="{ThemeResource FilledPasswordBoxBorderBrush}" />
 		<Setter Property="HorizontalContentAlignment" Value="Left" />
 		<Setter Property="VerticalContentAlignment" Value="Center" />
-		<Setter Property="CornerRadius" Value="4,4,0,0" />
-		<Setter Property="Padding" Value="16,4,8,4" />
-		<Setter Property="MinHeight" Value="58" />
+		<Setter Property="CornerRadius" Value="{ThemeResource FilledPasswordBoxCornerRadius}" />
+		<Setter Property="Padding" Value="{ThemeResource FilledPasswordBoxPadding}" />
+		<Setter Property="MinHeight" Value="{ThemeResource FilledPasswordBoxMinHeight}" />
 
 		<!-- Start: Body Large Typo -->
 		<Setter Property="FontFamily" Value="{ThemeResource FilledPasswordBoxFontFamily}" />
@@ -242,7 +274,7 @@
 										<Setter Target="ContentElement.Foreground" Value="{ThemeResource FilledPasswordBoxForegroundPointerOver}" />
 										<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource FilledPasswordBoxPlaceholderForegroundPointerOver}" />
 										<Setter Target="Root.Background" Value="{ThemeResource FilledPasswordBoxBackgroundPointerOver}" />
-										<Setter Target="NormalBorder.Height" Value="2" />
+										<Setter Target="NormalBorder.Height" Value="{ThemeResource FilledPasswordBoxBorderHeightPointerOver}" />
 									</VisualState.Setters>
 								</VisualState>
 
@@ -266,7 +298,7 @@
 										<Setter Target="ContentElement.Foreground" Value="{ThemeResource FilledPasswordBoxForegroundFocused}" />
 										<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource FilledPasswordBoxPlaceholderForegroundFocused}" />
 										<Setter Target="Root.Background" Value="{ThemeResource FilledPasswordBoxBackgroundFocused}" />
-										<Setter Target="NormalBorder.Height" Value="2" />
+										<Setter Target="NormalBorder.Height" Value="{ThemeResource FilledPasswordBoxBorderHeightFocused}" />
 									</VisualState.Setters>
 
 									<Storyboard>
@@ -418,12 +450,12 @@
 		<Setter Property="Background" Value="{ThemeResource OutlinedPasswordBoxBackground}" />
 		<Setter Property="Foreground" Value="{ThemeResource OutlinedPasswordBoxForeground}" />
 		<Setter Property="BorderBrush" Value="{ThemeResource OutlinedPasswordBoxBorderBrush}" />
-		<Setter Property="BorderThickness" Value="1" />
-		<Setter Property="CornerRadius" Value="4" />
+		<Setter Property="BorderThickness" Value="{ThemeResource OutlinedPasswordBoxBorderThickness}" />
+		<Setter Property="CornerRadius" Value="{ThemeResource OutlinedPasswordBoxCornerRadius}" />
 		<Setter Property="HorizontalContentAlignment" Value="Left" />
 		<Setter Property="VerticalContentAlignment" Value="Center" />
-		<Setter Property="Padding" Value="16,4,8,4" />
-		<Setter Property="MinHeight" Value="56" />
+		<Setter Property="Padding" Value="{ThemeResource OutlinedPasswordBoxPadding}" />
+		<Setter Property="MinHeight" Value="{ThemeResource OutlinedPasswordBoxMinHeight}" />
 
 		<!-- Start: Body Large Typo -->
 		<Setter Property="FontFamily" Value="{ThemeResource OutlinedPasswordBoxFontFamily}" />
@@ -442,7 +474,7 @@
 							BorderBrush="{TemplateBinding BorderBrush}"
 							BorderThickness="{TemplateBinding BorderThickness}"
 							CornerRadius="{TemplateBinding CornerRadius}"
-							Padding="1">
+							Padding="{ThemeResource OutlinedPasswordBoxBorderPadding}">
 
 						<VisualStateManager.VisualStateGroups>
 							<VisualStateGroup x:Name="CommonStates">
@@ -454,8 +486,8 @@
 										<Setter Target="ContentElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxForegroundPointerOver}" />
 										<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxPlaceholderForegroundPointerOver}" />
 										<Setter Target="Root.Background" Value="{ThemeResource OutlinedPasswordBoxBackgroundPointerOver}" />
-										<Setter Target="RootBorder.BorderThickness" Value="2" />
-										<Setter Target="RootBorder.Padding" Value="0" />
+										<Setter Target="RootBorder.BorderThickness" Value="{ThemeResource OutlinedPasswordBoxBorderThicknessPointerOver}" />
+										<Setter Target="RootBorder.Padding" Value="{ThemeResource OutlinedPasswordBoxBorderPaddingPointerOver}" />
 									</VisualState.Setters>
 								</VisualState>
 
@@ -479,8 +511,8 @@
 										<Setter Target="ContentElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxForegroundFocused}" />
 										<Setter Target="PlaceholderElement.Foreground" Value="{ThemeResource OutlinedPasswordBoxPlaceholderForegroundFocused}" />
 										<Setter Target="Root.Background" Value="{ThemeResource OutlinedPasswordBoxBackgroundFocused}" />
-										<Setter Target="RootBorder.BorderThickness" Value="2" />
-										<Setter Target="RootBorder.Padding" Value="0" />
+										<Setter Target="RootBorder.BorderThickness" Value="{ThemeResource OutlinedPasswordBoxBorderThicknessFocused}" />
+										<Setter Target="RootBorder.Padding" Value="{ThemeResource OutlinedPasswordBoxBorderPaddingFocused}" />
 									</VisualState.Setters>
 								</VisualState>
 							</VisualStateGroup>