fix: CheckBox label typo to match Uno Figma file

unoplatform · Jun 1, 2022 · 6bf3454 · 6bf3454
1 parent 680306c
commit 6bf3454
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 17 deletions.
diff --git a/src/library/Uno.Material/Generated/mergedpages.v2.xaml b/src/library/Uno.Material/Generated/mergedpages.v2.xaml
@@ -1180,12 +1180,19 @@
   <x:Double x:Key="FocusAreaSize">40</x:Double>
   <x:Double x:Key="CheckAreaSize">18</x:Double>
   <CornerRadius x:Key="CheckAreaCornerRadius">4</CornerRadius>
+  <x:Double x:Key="MaterialCheckBoxFontSize">12</x:Double>
+  <x:Double x:Key="MaterialCheckBoxCharacterSpacing">33.333</x:Double>
   <SolidColorBrush x:Key="MaterialCheckBoxBorderBrush" Color="{ThemeResource OnSurfaceColor}" Opacity="{StaticResource MediumOpacity}" />
   <SolidColorBrush x:Key="MaterialCheckBoxPressedBrush" Color="{ThemeResource OnSurfaceColor}" Opacity="{StaticResource LowOpacity}" />
   <Style x:Key="MaterialCheckBoxStyle" TargetType="CheckBox">
-    <Setter Property="FontFamily" Value="{StaticResource MaterialRegularFontFamily}" />
     <Setter Property="Background" Value="{StaticResource PrimaryBrush}" />
     <Setter Property="Foreground" Value="{StaticResource OnPrimaryBrush}" />
+    <!--Start: Label Body Small Typo-->
+    <Setter Property="FontSize" Value="{StaticResource MaterialCheckBoxFontSize}" />
+    <Setter Property="FontWeight" Value="Medium" />
+    <Setter Property="FontFamily" Value="{StaticResource MaterialMediumFontFamily}" />
+    <Setter Property="CharacterSpacing" Value="{StaticResource MaterialCheckBoxCharacterSpacing}" />
+    <!--End: Label Body Small Typo-->
     <Setter Property="BorderBrush" Value="{StaticResource MaterialCheckBoxBorderBrush}" />
     <Setter Property="BorderThickness" Value="2" />
     <Setter Property="Padding" Value="8,0,0,0" />
@@ -1420,7 +1427,7 @@
               <Path x:Name="HyphenGlyph" Data="{StaticResource CheckBoxHyphenGlyphPathStyle}" Fill="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Uniform" Width="12" Height="4" Opacity="0" AutomationProperties.AccessibilityView="Raw" xamarin:Margin="0,2,0,0" />
               <Path x:Name="CheckGlyph" Data="{StaticResource CheckBoxCheckGlyphPathStyle}" Fill="{TemplateBinding Foreground}" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Uniform" Width="12" Height="12" Opacity="0" AutomationProperties.AccessibilityView="Raw" xamarin:Margin="0,2,0,0" />
             </Grid>
-            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Foreground="{StaticResource OnBackgroundBrush}" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="1" AutomationProperties.AccessibilityView="Raw" TextWrapping="Wrap" />
+            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Foreground="{StaticResource OnSurfaceMediumBrush}" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="1" AutomationProperties.AccessibilityView="Raw" TextWrapping="Wrap" />
           </Grid>
         </ControlTemplate>
       </Setter.Value>
@@ -5300,6 +5307,12 @@
     <!--  Tracking: 0.5 px  -->
     <Setter Property="CharacterSpacing" Value="45.454" />
   </Style>
+  <Style x:Key="MaterialLabelExtraSmall" BasedOn="{StaticResource MaterialBaseTextBlockStyle}" TargetType="TextBlock">
+    <Setter Property="FontSize" Value="11" />
+    <Setter Property="LineHeight" Value="16" />
+    <!--  Tracking: 0.1 px  -->
+    <Setter Property="CharacterSpacing" Value="7.143" />
+  </Style>
   <Style x:Key="MaterialBodyLarge" BasedOn="{StaticResource MaterialBaseTextBlockStyle}" TargetType="TextBlock">
     <Setter Property="FontSize" Value="16" />
     <Setter Property="LineHeight" Value="24" />
@@ -5321,6 +5334,30 @@
     <!--  Tracking: 0.4 px  -->
     <Setter Property="CharacterSpacing" Value="33.333" />
   </Style>
+  <Style x:Key="MaterialCaptionLarge" BasedOn="{StaticResource MaterialBaseTextBlockStyle}" TargetType="TextBlock">
+    <Setter Property="FontSize" Value="13" />
+    <Setter Property="LineHeight" Value="18" />
+    <Setter Property="FontWeight" Value="Medium" />
+    <Setter Property="FontFamily" Value="{StaticResource MaterialMediumFontFamily}" />
+    <!--  Tracking: 0.15 px  -->
+    <Setter Property="CharacterSpacing" Value="9.375" />
+  </Style>
+  <Style x:Key="MaterialCaptionMedium" BasedOn="{StaticResource MaterialBaseTextBlockStyle}" TargetType="TextBlock">
+    <Setter Property="FontSize" Value="12" />
+    <Setter Property="LineHeight" Value="16" />
+    <Setter Property="FontWeight" Value="Medium" />
+    <Setter Property="FontFamily" Value="{StaticResource MaterialMediumFontFamily}" />
+    <!--  Tracking: 0.4 px  -->
+    <Setter Property="CharacterSpacing" Value="33.333" />
+  </Style>
+  <Style x:Key="MaterialCaptionSmall" BasedOn="{StaticResource MaterialBaseTextBlockStyle}" TargetType="TextBlock">
+    <Setter Property="FontSize" Value="11" />
+    <Setter Property="LineHeight" Value="13" />
+    <Setter Property="FontWeight" Value="Medium" />
+    <Setter Property="FontFamily" Value="{StaticResource MaterialMediumFontFamily}" />
+    <!--  Tracking: 0.1 px  -->
+    <Setter Property="CharacterSpacing" Value="7.143" />
+  </Style>
   <!--origin: Styles\Controls\v2\TextBox.xaml-->
   <um:FromEmptyStringToValueConverter x:Key="EmptyToCompositeTransformTranslateY" NotNullOrEmptyValue="5" NullOrEmptyValue="0" />
   <x:String x:Key="M3ClearGlyphPathData">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</x:String>

diff --git a/src/library/Uno.Material/Styles/Controls/v2/CheckBox.xaml b/src/library/Uno.Material/Styles/Controls/v2/CheckBox.xaml
@@ -16,6 +16,9 @@
 	<x:Double x:Key="FocusAreaSize">40</x:Double>
 	<x:Double x:Key="CheckAreaSize">18</x:Double>
 	<CornerRadius x:Key="CheckAreaCornerRadius">4</CornerRadius>
+	<!-- CheckBox label based on Body Small Typo -->
+	<x:Double x:Key="MaterialCheckBoxFontSize">12</x:Double>
+	<x:Double x:Key="MaterialCheckBoxCharacterSpacing">33.333</x:Double>
 
 	<SolidColorBrush x:Key="MaterialCheckBoxBorderBrush"
 					 Color="{ThemeResource OnSurfaceColor}"
@@ -26,12 +29,22 @@
 
 	<Style x:Key="MaterialCheckBoxStyle"
 		   TargetType="CheckBox">
-		<Setter Property="FontFamily"
-				Value="{StaticResource MaterialRegularFontFamily}" />
 		<Setter Property="Background"
 				Value="{StaticResource PrimaryBrush}" />
 		<Setter Property="Foreground"
 				Value="{StaticResource OnPrimaryBrush}" />
+
+		<!--Start: Label Body Small Typo-->
+		<Setter Property="FontSize"
+				Value="{StaticResource MaterialCheckBoxFontSize}" />
+		<Setter Property="FontWeight"
+				Value="Medium" />
+		<Setter Property="FontFamily"
+				Value="{StaticResource MaterialMediumFontFamily}" />
+		<Setter Property="CharacterSpacing"
+				Value="{StaticResource MaterialCheckBoxCharacterSpacing}" />
+		<!--End: Label Body Small Typo-->
+
 		<Setter Property="BorderBrush"
 				Value="{StaticResource MaterialCheckBoxBorderBrush}" />
 		<Setter Property="BorderThickness"
@@ -520,7 +533,7 @@
 										  ContentTemplate="{TemplateBinding ContentTemplate}"
 										  ContentTransitions="{TemplateBinding ContentTransitions}"
 										  Content="{TemplateBinding Content}"
-										  Foreground="{StaticResource OnBackgroundBrush}"
+										  Foreground="{StaticResource OnSurfaceMediumBrush}"
 										  Margin="{TemplateBinding Padding}"
 										  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
 										  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

diff --git a/...les/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/CheckBoxSamplePage.xaml b/...les/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/CheckBoxSamplePage.xaml
@@ -141,43 +141,43 @@
 
 						<!-- CheckBox OFF -->
 						<smtx:XamlDisplay UniqueKey="M3Material_CheckBoxSamplePage_Off">
-							<CheckBox Content="UNCHECKED"
+							<CheckBox Content="Unchecked"
 									  Style="{StaticResource MaterialCheckBoxStyle}" />
 						</smtx:XamlDisplay>
 
 						<!-- CheckBox ON -->
 						<smtx:XamlDisplay UniqueKey="M3Material_CheckBoxSamplePage_On">
-							<CheckBox Content="CHECKED"
+							<CheckBox Content="Checked"
 									  Style="{StaticResource MaterialCheckBoxStyle}"
 									  IsChecked="True" />
 						</smtx:XamlDisplay>
 
 						<!-- CheckBox Indeterminate -->
 						<smtx:XamlDisplay UniqueKey="M3Material_CheckBoxSamplePage_Indeterminate">
-							<CheckBox Content="INDETERMINATE"
+							<CheckBox Content="Indeterminate"
 									  Style="{StaticResource MaterialCheckBoxStyle}"
 									  IsThreeState="True"
 									  IsChecked="{x:Null}" />
 						</smtx:XamlDisplay>
 
 						<!-- CheckBox OFF Disabled -->
 						<smtx:XamlDisplay UniqueKey="M3Material_CheckBoxSamplePage_OffDisabled">
-							<CheckBox Content="DISABLED"
+							<CheckBox Content="Disabled"
 									  Style="{StaticResource MaterialCheckBoxStyle}"
 									  IsEnabled="False" />
 						</smtx:XamlDisplay>
 
 						<!-- CheckBox ON Disabled -->
 						<smtx:XamlDisplay UniqueKey="M3Material_CheckBoxSamplePage_OnDisabled">
-							<CheckBox Content="CHECKED DISABLED"
+							<CheckBox Content="Checked Disabled"
 									  Style="{StaticResource MaterialCheckBoxStyle}"
 									  IsEnabled="False"
 									  IsChecked="True" />
 						</smtx:XamlDisplay>
 
 						<!-- Checkbox Indeterminate Disabled -->
 						<smtx:XamlDisplay UniqueKey="M3Material_CheckBoxSamplePage_IndeterminateDisabled">
-							<CheckBox Content="INDETERMINATE DISABLED"
+							<CheckBox Content="Indeterminate Disabled"
 									  Style="{StaticResource MaterialCheckBoxStyle}"
 									  IsEnabled="False"
 									  IsThreeState="True"
@@ -196,43 +196,43 @@
 
 						<!-- CheckBox OFF -->
 						<smtx:XamlDisplay UniqueKey="M3Material_CheckBoxSamplePage_SecondaryOff">
-							<CheckBox Content="UNCHECKED"
+							<CheckBox Content="Unchecked"
 									  Style="{StaticResource MaterialSecondaryCheckBoxStyle}" />
 						</smtx:XamlDisplay>
 
 						<!-- CheckBox ON -->
 						<smtx:XamlDisplay UniqueKey="M3Material_CheckBoxSamplePage_SecondaryOn">
-							<CheckBox Content="CHECKED"
+							<CheckBox Content="Checked"
 									  Style="{StaticResource MaterialSecondaryCheckBoxStyle}"
 									  IsChecked="True" />
 						</smtx:XamlDisplay>
 
 						<!-- CheckBox Indeterminate -->
 						<smtx:XamlDisplay UniqueKey="M3Material_CheckBoxSamplePage_SecondaryIndeterminate">
-							<CheckBox Content="INDETERMINATE"
+							<CheckBox Content="Indeterminate"
 									  Style="{StaticResource MaterialSecondaryCheckBoxStyle}"
 									  IsThreeState="True"
 									  IsChecked="{x:Null}" />
 						</smtx:XamlDisplay>
 
 						<!-- CheckBox OFF Disabled -->
 						<smtx:XamlDisplay UniqueKey="M3Material_CheckBoxSamplePage_SecondaryOffDisabled">
-							<CheckBox Content="DISABLED"
+							<CheckBox Content="Disabled"
 									  Style="{StaticResource MaterialSecondaryCheckBoxStyle}"
 									  IsEnabled="False" />
 						</smtx:XamlDisplay>
 
 						<!-- CheckBox ON Disabled -->
 						<smtx:XamlDisplay UniqueKey="M3Material_CheckBoxSamplePage_SecondaryOnDisabled">
-							<CheckBox Content="CHECKED DISABLED"
+							<CheckBox Content="Checked Disabled"
 									  Style="{StaticResource MaterialSecondaryCheckBoxStyle}"
 									  IsEnabled="False"
 									  IsChecked="True" />
 						</smtx:XamlDisplay>
 
 						<!-- Checkbox Indeterminate Disabled -->
 						<smtx:XamlDisplay UniqueKey="M3Material_CheckBoxSamplePage_SecondaryIndeterminateDisabled">
-							<CheckBox Content="INDETERMINATE DISABLED"
+							<CheckBox Content="Indeterminate Disabled"
 									  Style="{StaticResource MaterialSecondaryCheckBoxStyle}"
 									  IsEnabled="False"
 									  IsThreeState="True"