Default button style shouldn't be primary button

Esri · Feb 11, 2025 · 1cbe621 · 1cbe621
1 parent 35f3747
commit 1cbe621
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 40 deletions.
diff --git a/src/Esri.Calcite.Maui/Resources/Styles/Styles.xaml b/src/Esri.Calcite.Maui/Resources/Styles/Styles.xaml
@@ -24,6 +24,39 @@
     </Style>
 
     <Style TargetType="Button" x:Key="CalciteButtonStyle">
+        <Setter Property="TextColor" Value="{AppThemeBinding Dark={x:DynamicResource CalciteText1DarkColor}, Light={x:DynamicResource CalciteText1LightColor}}" />
+        <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={x:DynamicResource CalciteBrandDarkColor}, Light={x:DynamicResource CalciteBrandLightColor}}" />
+        <Setter Property="VisualStateManager.VisualStateGroups">
+            <VisualStateGroupList>
+                <VisualStateGroup Name="CommonStates">
+                    <VisualState Name="Normal">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={x:DynamicResource CalciteBackground3DarkColor}, Light={x:DynamicResource CalciteBackground3LightColor}}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                    <VisualState Name="PointerOver">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={x:DynamicResource CalciteBackground2DarkColor}, Light={x:DynamicResource CalciteBackground2LightColor}}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                    <VisualState Name="Pressed">
+                        <VisualState.Setters>
+                            <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={x:DynamicResource CalciteBackground1DarkColor}, Light={x:DynamicResource CalciteBackground1LightColor}}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                    <VisualState Name="Disabled">
+                        <VisualState.Setters>
+                            <Setter Property="Opacity" Value=".5" />
+                            <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={x:DynamicResource CalciteBackground3DarkColor}, Light={x:DynamicResource CalciteBackground3LightColor}}" />
+                        </VisualState.Setters>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateGroupList>
+        </Setter>
+    </Style>
+
+
+    <Style TargetType="Button" x:Key="CalcitePrimaryButtonStyle" BasedOn="{StaticResource CalciteButtonStyle}" >
         <Setter Property="TextColor" Value="White" />
         <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={x:DynamicResource CalciteBrandDarkColor}, Light={x:DynamicResource CalciteBrandLightColor}}" />
         <Setter Property="VisualStateManager.VisualStateGroups">
@@ -55,9 +88,6 @@
         </Setter>
     </Style>
 
-
-    <Style TargetType="Button" x:Key="CalcitePrimaryButtonStyle" BasedOn="{StaticResource CalciteButtonStyle}" />
-
     <Style TargetType="Button" x:Key="CalciteSecondaryButtonStyle">
         <Setter Property="TextColor" Value="{AppThemeBinding Light={x:DynamicResource CalciteBrandLightColor}, Dark={x:DynamicResource CalciteBrandDarkColor}}" />
         <Setter Property="Background" Value="{StaticResource CalciteBackground1Brush}" />

diff --git a/src/Esri.Calcite.WinUI/Styles/Controls/Buttons.xaml b/src/Esri.Calcite.WinUI/Styles/Controls/Buttons.xaml
@@ -8,17 +8,17 @@
         <ResourceDictionary Source="ms-appx:///Esri.Calcite.WinUI/Styles/Brushes.xaml" />
     </ResourceDictionary.MergedDictionaries>
 
-    <StaticResource x:Key="ButtonBackground" ResourceKey="CalciteBrandBrush" />
-    <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="CalciteBrandHoverBrush" />
-    <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="CalciteBrandPressBrush" />
+    <StaticResource x:Key="ButtonBackground" ResourceKey="CalciteBackground3Brush" />
+    <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="CalciteBackground2Brush" />
+    <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="CalciteBackground1Brush" />
     <!--<StaticResource x:Key="ButtonBackgroundDisabled" ResourceKey="SystemControlBackgroundBaseLowBrush" />-->
-    <StaticResource x:Key="ButtonForeground" ResourceKey="CalciteTextOnBrandBrush" />
-    <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="CalciteTextOnBrandBrush" />
-    <StaticResource x:Key="ButtonForegroundPressed" ResourceKey="CalciteTextOnBrandBrush" />
+    <StaticResource x:Key="ButtonForeground" ResourceKey="CalciteText1Brush" />
+    <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="CalciteText1Brush" />
+    <StaticResource x:Key="ButtonForegroundPressed" ResourceKey="CalciteText1Brush" />
     <!--<StaticResource x:Key="ButtonForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />-->
-    <StaticResource x:Key="ButtonBorderBrush" ResourceKey="CalciteBrandBrush" />
-    <StaticResource x:Key="ButtonBorderBrushPointerOver" ResourceKey="CalciteBrandHoverBrush" />
-    <StaticResource x:Key="ButtonBorderBrushPressed" ResourceKey="CalciteBrandPressBrush" />
+    <StaticResource x:Key="ButtonBorderBrush" ResourceKey="CalciteBackground3Brush" />
+    <StaticResource x:Key="ButtonBorderBrushPointerOver" ResourceKey="CalciteBackground2Brush" />
+    <StaticResource x:Key="ButtonBorderBrushPressed" ResourceKey="CalciteBackground1Brush" />
     <!--<StaticResource x:Key="ButtonBorderBrushDisabled" ResourceKey="SystemControlDisabledTransparentBrush" />-->
     <!--  Button padding should take button border offset into account (e.g. +1 to get desired effect of 8,4,8,4)  -->
     <Thickness x:Key="CalciteButtonPadding">7,3,7,3</Thickness>
@@ -32,6 +32,9 @@
         <Setter Property="Padding" Value="{StaticResource CalciteButtonPadding}" />
         <Setter Property="MinHeight" Value="28" />
         <Setter Property="CornerRadius" Value="0" />
+    </Style>
+
+    <Style TargetType="Button" x:Key="CalcitePrimaryButtonStyle" BasedOn="{StaticResource CalciteButtonStyle}" >
         <Setter Property="cal:CalciteResources.StyleResources">
             <Setter.Value>
                 <ResourceDictionary>
@@ -49,8 +52,6 @@
         </Setter>
     </Style>
 
-    <Style TargetType="Button" x:Key="CalcitePrimaryButtonStyle" BasedOn="{StaticResource CalciteButtonStyle}" />
-
     <Style TargetType="Button" x:Key="CalciteSecondaryButtonStyle" BasedOn="{StaticResource CalciteButtonStyle}">
         <Setter Property="cal:CalciteResources.StyleResources">
             <Setter.Value>
@@ -106,5 +107,5 @@
     </Style>
 
     <!-- Implicit style -->
-    <Style TargetType="Button" BasedOn="{StaticResource CalcitePrimaryButtonStyle}" />
+    <Style TargetType="Button" BasedOn="{StaticResource CalciteButtonStyle}" />
 </ResourceDictionary>
diff --git a/src/Esri.Calcite.Wpf/ControlOverrides.xaml b/src/Esri.Calcite.Wpf/ControlOverrides.xaml
@@ -18,8 +18,8 @@
     <Style BasedOn="{StaticResource CalciteComboBoxStyle}" TargetType="ComboBox" />
     <Style BasedOn="{StaticResource CalciteCheckBoxStyle}" TargetType="CheckBox" />
     <Style BasedOn="{StaticResource CalciteCalendarStyle}" TargetType="Calendar" />
-    <Style BasedOn="{StaticResource CalcitePrimaryButtonBaseStyle}" TargetType="Button" />
-    <Style BasedOn="{StaticResource CalcitePrimaryButtonBaseStyle}" TargetType="ToggleButton" />
+    <Style BasedOn="{StaticResource CalciteButtonBaseStyle}" TargetType="Button" />
+    <Style BasedOn="{StaticResource CalciteButtonBaseStyle}" TargetType="ToggleButton" />
     <Style BasedOn="{StaticResource CalciteTextBlockStyle}" TargetType="TextBlock" />
     <Style BasedOn="{StaticResource CalciteDatePickerStyle}" TargetType="DatePicker" />
     <Style BasedOn="{StaticResource CalciteStatusBarStyle}" TargetType="StatusBar" />

diff --git a/src/Esri.Calcite.Wpf/Controls/Buttons.xaml b/src/Esri.Calcite.Wpf/Controls/Buttons.xaml
@@ -102,6 +102,21 @@
         </Style.Triggers>
     </Style>
 
+    <Style
+        x:Key="CalciteButtonBaseStyle"
+        BasedOn="{StaticResource CalciteCommonButtonBaseStyle}"
+        TargetType="ButtonBase">
+        <Setter Property="ca:AttachedBrushes.BackgroundNormal" Value="{DynamicResource CalciteBackground3Brush}" />
+        <Setter Property="ca:AttachedBrushes.BackgroundHover" Value="{DynamicResource CalciteBackground2Brush}" />
+        <Setter Property="ca:AttachedBrushes.BackgroundPress" Value="{DynamicResource CalciteBackground1Brush}" />
+        <Setter Property="ca:AttachedBrushes.BorderNormal" Value="{DynamicResource CalciteBackground3Brush}" />
+        <Setter Property="ca:AttachedBrushes.BorderHover" Value="{DynamicResource CalciteBackground2Brush}" />
+        <Setter Property="ca:AttachedBrushes.BorderPress" Value="{DynamicResource CalciteBackground1Brush}" />
+        <Setter Property="ca:AttachedBrushes.ForegroundNormal" Value="{DynamicResource CalciteText1Brush}" />
+        <Setter Property="ca:AttachedBrushes.ForegroundHover" Value="{DynamicResource CalciteText1Brush}" />
+        <Setter Property="ca:AttachedBrushes.ForegroundPress" Value="{DynamicResource CalciteText1Brush}" />
+    </Style>
+
     <Style
         x:Key="CalcitePrimaryButtonBaseStyle"
         BasedOn="{StaticResource CalciteCommonButtonBaseStyle}"
@@ -160,19 +175,6 @@
         <Setter Property="ca:AttachedBrushes.ForegroundPress" Value="{DynamicResource CalciteStatusDangerPressBrush}" />
 
     </Style>
-    <Style
-        x:Key="CalciteChromeButtonBaseStyle"
-        BasedOn="{StaticResource CalciteCommonButtonBaseStyle}"
-        TargetType="ButtonBase">
-        <Setter Property="cm:AttachedBrushes.BackgroundHover" Value="{DynamicResource CalciteBackground2Brush}" />
-        <Setter Property="cm:AttachedBrushes.BackgroundNormal" Value="{DynamicResource CalciteBackground3Brush}" />
-        <Setter Property="cm:AttachedBrushes.BackgroundPress" Value="{DynamicResource CalciteBackground1Brush}" />
-        <Setter Property="cm:AttachedBrushes.BorderNormal" Value="{DynamicResource CalciteBackground3Brush}" />
-        <Setter Property="cm:AttachedBrushes.BorderHover" Value="{DynamicResource CalciteBackground2Brush}" />
-        <Setter Property="cm:AttachedBrushes.BorderPress" Value="{DynamicResource CalciteBackground1Brush}" />
-        <Setter Property="cm:AttachedBrushes.ForegroundNormal" Value="{DynamicResource CalciteText1Brush}" />
-        <Setter Property="cm:AttachedBrushes.ForegroundHover" Value="{DynamicResource CalciteText1Brush}" />
-        <Setter Property="cm:AttachedBrushes.ForegroundPress" Value="{DynamicResource CalciteText1Brush}" />
-    </Style>
+
 
 </ResourceDictionary>
diff --git a/src/Esri.Calcite.Wpf/Controls/ToolBar.xaml b/src/Esri.Calcite.Wpf/Controls/ToolBar.xaml
@@ -11,7 +11,7 @@
 
     <Style
         x:Key="CalciteToolBarButtonBaseStyle"
-        BasedOn="{StaticResource CalciteChromeButtonBaseStyle}"
+        BasedOn="{StaticResource CalciteButtonBaseStyle}"
         TargetType="{x:Type ButtonBase}">
         <Setter Property="MinWidth" Value="32" />
         <Setter Property="Height" Value="32" />

diff --git a/src/TestApps/MauiTests/AppShell.xaml b/src/TestApps/MauiTests/AppShell.xaml
@@ -14,7 +14,7 @@
     </FlyoutItem>
     <Shell.FlyoutContent>
         <StackLayout HorizontalOptions="Fill" Padding="20" WidthRequest="320">
-            <Frame CornerRadius="25" Padding="0" WidthRequest="50" HeightRequest="50" Background="{StaticResource CalciteUIBrandLightColor}">
+            <Frame CornerRadius="25" Padding="0" WidthRequest="50" HeightRequest="50" Background="{StaticResource CalciteBrandLightColor}">
                 <Image Source="{calcite:CalciteIconImage Icon=BrushTip, Size=30, Scale=Large,Color=White}" WidthRequest="30" />
             </Frame>
             <Label Text="Calcite" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Subtitle" />

diff --git a/src/TestApps/MauiTests/MainPage.xaml b/src/TestApps/MauiTests/MainPage.xaml
@@ -12,6 +12,7 @@
 
             <HorizontalStackLayout>
                 <Button Text="Default Button Style" />
+                <Button Text="Default Button Style" IsEnabled="False" />
             </HorizontalStackLayout>
             <HorizontalStackLayout>
                 <Button Text="CalcitePrimaryButtonStyle" Style="{StaticResource CalcitePrimaryButtonStyle}" />

diff --git a/src/TestApps/WpfTests/MainWindow.xaml b/src/TestApps/WpfTests/MainWindow.xaml
@@ -52,15 +52,13 @@
                 <ToggleButton
                     x:Name="LightToggle"
                     Content="Dark Mode"
-                    ca:Calcite.Symbol="Moon"
-                    Style="{DynamicResource CalciteChromeButtonBaseStyle}" />
+                    ca:Calcite.Symbol="Moon" />
             </StatusBarItem>
             <StatusBarItem>
                 <ToggleButton
                     x:Name="StyleToggle"
                     Content="Enable Default Style"
-                    ca:Calcite.Symbol="BrushMark" IsChecked="True"
-                    Style="{DynamicResource CalciteChromeButtonBaseStyle}" />
+                    ca:Calcite.Symbol="BrushMark" IsChecked="True" />
             </StatusBarItem>
         </StatusBar>
         <!--<Path Data="{calcite:CalciteIconGeometry Icon=Map, SymbolSize=16}" Fill="Red" Width="100" Height="100"/>-->

diff --git a/src/TestApps/WpfTests/Samples/Buttons/Chrome.xaml b/src/TestApps/WpfTests/Samples/Buttons/Chrome.xaml
@@ -1 +1 @@
-<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Style="{DynamicResource CalciteChromeButtonBaseStyle}">Test Passed</Button>
+<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Style="{DynamicResource CalcitePrimaryButtonBaseStyle}">Test Passed</Button>
diff --git a/src/TestApps/WpfTests/Samples/Buttons/FormsWorkflow.xaml b/src/TestApps/WpfTests/Samples/Buttons/FormsWorkflow.xaml
@@ -1,9 +1,9 @@
 <Border xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Style="{DynamicResource CalciteFormBorderStyle}">
     <StackPanel>
-        <Button>Primary</Button>
+        <Button Style="{DynamicResource CalcitePrimaryButtonBaseStyle}">Primary</Button>
         <Button Style="{DynamicResource CalciteSecondaryButtonBaseStyle}">Secondary</Button>
         <Button Style="{DynamicResource CalciteDangerButtonBaseStyle}">Danger</Button>
         <Button Style="{DynamicResource CalciteDangerSecondaryButtonBaseStyle}">Danger2</Button>
-        <Button Style="{DynamicResource CalciteChromeButtonBaseStyle}">Chrome</Button>
+        <Button>Default</Button>
     </StackPanel>
 </Border>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Style="{DynamicResource CalciteChromeButtonBaseStyle}">Test Passed</Button>
		<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Style="{DynamicResource CalcitePrimaryButtonBaseStyle}">Test Passed</Button>