From bd526e38e8195cc2d12c4179b06e2bdecfc64591 Mon Sep 17 00:00:00 2001
From: SKProCH <skproch@yandex.ru>
Date: Sun, 28 Apr 2024 22:43:20 +0300
Subject: [PATCH 1/5] Rework ToggleButtons #259

---
 .../Pages/ColorZonesDemo.axaml                |  20 +-
 .../Resources/Themes/ToggleButton.axaml       | 196 +++++++++++-------
 2 files changed, 132 insertions(+), 84 deletions(-)

diff --git a/Material.Avalonia.Demo/Pages/ColorZonesDemo.axaml b/Material.Avalonia.Demo/Pages/ColorZonesDemo.axaml
index 1ff2add6..5ccc9ded 100644
--- a/Material.Avalonia.Demo/Pages/ColorZonesDemo.axaml
+++ b/Material.Avalonia.Demo/Pages/ColorZonesDemo.axaml
@@ -21,7 +21,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo1">
                 <controls:ColorZone Height="56" Padding="12">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -33,7 +33,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo2">
                 <controls:ColorZone Height="56" Padding="12" Mode="Inverted">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -45,7 +45,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo3">
                 <controls:ColorZone Height="56" Padding="12" Mode="Dark">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -57,7 +57,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo4">
                 <controls:ColorZone Height="56" Padding="12" Mode="Light">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -69,7 +69,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo5">
                 <controls:ColorZone Height="56" Padding="12" Mode="PrimaryLight">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -81,7 +81,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo6">
                 <controls:ColorZone Height="56" Padding="12" Mode="PrimaryMid">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -93,7 +93,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo7">
                 <controls:ColorZone Height="56" Padding="12" Mode="PrimaryDark">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -105,7 +105,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneDemo8">
                 <controls:ColorZone Height="56" Padding="12" Mode="Accent">
                     <Grid ColumnDefinitions="Auto,24,*">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                     </Grid>
                 </controls:ColorZone>
@@ -118,7 +118,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneAdvDemo1">
                 <controls:ColorZone Height="56" Padding="12">
                     <Grid ColumnDefinitions="Auto,24,*,24,Auto">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                         
                         <ReversibleStackPanel Grid.Column="4" Margin="0" Orientation="Horizontal">
@@ -134,7 +134,7 @@
             <showMeTheXaml:XamlDisplay UniqueId="ColorZoneAdvDemo2">
                 <controls:ColorZone Height="56" Padding="12">
                     <Grid ColumnDefinitions="Auto,24,*,*,24,Auto">
-                        <ToggleButton Grid.Column="0" Classes="Flat TransparentBack" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
+                        <ToggleButton Grid.Column="0" Theme="{StaticResource MaterialFlatToggleButton}" Padding="4" Width="{Binding $self.Bounds.Height}" Content="{icons:MaterialIconExt Menu}" />
                         <TextBlock Grid.Column="2" Classes="Headline6" VerticalAlignment="Center" Text="Material Design Demo"/>
                         
                         <Panel Grid.Column="3" VerticalAlignment="Center">
diff --git a/Material.Styles/Resources/Themes/ToggleButton.axaml b/Material.Styles/Resources/Themes/ToggleButton.axaml
index 65e2f4bc..56c8e9b0 100644
--- a/Material.Styles/Resources/Themes/ToggleButton.axaml
+++ b/Material.Styles/Resources/Themes/ToggleButton.axaml
@@ -2,28 +2,82 @@
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:system="clr-namespace:System;assembly=netstandard"
                     xmlns:assists="clr-namespace:Material.Styles.Assists"
-                    xmlns:ripple="clr-namespace:Material.Ripple;assembly=Material.Ripple">
-  <system:Double x:Key="ButtonHoveredOpacity">0.12</system:Double>
+                    xmlns:ripple="clr-namespace:Material.Ripple;assembly=Material.Ripple"
+                    xmlns:controls="clr-namespace:Material.Styles.Controls">
+  <Design.PreviewWith>
+    <StackPanel Orientation="Vertical" Spacing="8" Margin="16">
+      <StackPanel Orientation="Horizontal" Spacing="8">
+        <ToggleButton>ToggleButton</ToggleButton>
+
+        <ToggleButton Classes="accent">Accent</ToggleButton>
+        <ToggleButton Classes="light">Light</ToggleButton>
+        <ToggleButton Classes="dark">Dark</ToggleButton>
+
+        <ToggleButton IsEnabled="False">Disabled</ToggleButton>
+
+        <StackPanel Orientation="Horizontal">
+          <TextBlock VerticalAlignment="Center" Margin="0 0 8 0" Text="Icon:" />
+          <ToggleButton Classes="Icon">
+            <controls:MaterialInternalIcon Kind="Clock" />
+          </ToggleButton>
+        </StackPanel>
+
+        <StackPanel Orientation="Horizontal">
+          <TextBlock VerticalAlignment="Center" Margin="0 0 8 0" Text="Icon NoFeedback:" />
+          <ToggleButton Classes="Icon NoFeedback">
+            <controls:MaterialInternalIcon Kind="Clock" />
+          </ToggleButton>
+        </StackPanel>
+      </StackPanel>
+      <StackPanel Orientation="Horizontal" Spacing="8">
+        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}">Flat</ToggleButton>
+
+        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" Classes="accent">Accent</ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" Classes="light">Light</ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" Classes="dark">Dark</ToggleButton>
+
+        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" IsEnabled="False">Disabled</ToggleButton>
+      </StackPanel>
+      <StackPanel Orientation="Horizontal" Spacing="8">
+        <ToggleButton Theme="{StaticResource MaterialOutlineToggleButton}">Flat</ToggleButton>
+
+        <ToggleButton Theme="{StaticResource MaterialOutlineToggleButton}" Classes="accent">Accent</ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialOutlineToggleButton}" Classes="light">Light</ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialOutlineToggleButton}" Classes="dark">Dark</ToggleButton>
+
+        <ToggleButton Theme="{StaticResource MaterialOutlineToggleButton}" IsEnabled="False">Disabled</ToggleButton>
+      </StackPanel>
+      <StackPanel Orientation="Horizontal" Spacing="8">
+        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}">Flat</ToggleButton>
+
+        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" Classes="accent">Accent</ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" Classes="light">Light</ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" Classes="dark">Dark</ToggleButton>
+
+        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" IsEnabled="False">Disabled</ToggleButton>
+      </StackPanel>
+    </StackPanel>
+  </Design.PreviewWith>
+  <!-- TODO: Replace with 0.04 when https://github.com/AvaloniaUI/Avalonia/issues/11332 fixed -->
+  <system:Double x:Key="ButtonHoveredOpacity">0.05</system:Double>
   <system:Double x:Key="ButtonDisabledOpacity">0.38</system:Double>
-  <system:Double x:Key="ButtonPressedOpacity">0.26</system:Double>
+  <system:Double x:Key="ButtonPressedOpacity">0.12</system:Double>
+  <system:Double x:Key="ButtonToggledOpacity">0.08</system:Double>
 
-  <ControlTheme x:Key="MaterialToggleButton" TargetType="ToggleButton">
+  <ControlTheme x:Key="MaterialFlatToggleButton" TargetType="ToggleButton">
     <Setter Property="CornerRadius" Value="4" />
-    <Setter Property="Background" Value="Transparent" />
-    <Setter Property="BorderBrush" Value="{DynamicResource MaterialDividerBrush}" />
     <Setter Property="HorizontalContentAlignment" Value="Center" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="BorderThickness" Value="0" />
     <Setter Property="Padding" Value="16 4 16 4" />
     <Setter Property="Cursor" Value="Hand" />
     <Setter Property="assists:ButtonAssist.HoverColor"
-            Value="{Binding Foreground,
-                      Converter={StaticResource BrushRoundConverter}, RelativeSource={RelativeSource Self}}" />
-    <Setter Property="assists:ButtonAssist.ClickFeedbackColor" Value="{DynamicResource MaterialPrimaryMidBrush}" />
+            Value="{Binding $self.Foreground, Converter={StaticResource BrushRoundConverter}}" />
+    <Setter Property="assists:ButtonAssist.ClickFeedbackColor" Value="{Binding $self.Foreground}" />
+    <Setter Property="ClipToBounds" Value="False" />
     <Setter Property="Template">
       <ControlTemplate>
         <Border Name="PART_RootBorder"
-                Background="{TemplateBinding Background}"
                 BorderBrush="{TemplateBinding BorderBrush}"
                 BorderThickness="{TemplateBinding BorderThickness}"
                 CornerRadius="{TemplateBinding CornerRadius}"
@@ -32,19 +86,22 @@
             <Border Name="PART_HoverEffect"
                     Background="{TemplateBinding assists:ButtonAssist.HoverColor}"
                     CornerRadius="{TemplateBinding CornerRadius}" />
-            <Border CornerRadius="{TemplateBinding CornerRadius}"
-                    ClipToBounds="True">
-              <ripple:RippleEffect Name="PART_Ripple"
-                                   RippleFill="{TemplateBinding assists:ButtonAssist.ClickFeedbackColor}"
-                                   RippleOpacity="{StaticResource ButtonPressedOpacity}">
-                <ContentPresenter Name="PART_ContentPresenter"
-                                  Content="{TemplateBinding Content}"
-                                  ContentTemplate="{TemplateBinding ContentTemplate}"
-                                  Padding="{TemplateBinding Padding}"
-                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
-              </ripple:RippleEffect>
-            </Border>
+            <Border Name="PART_Background"
+                    Background="{TemplateBinding Foreground}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    Opacity="0" />
+            <ripple:RippleEffect Name="PART_Ripple"
+                                 CornerRadius="{TemplateBinding CornerRadius}"
+                                 ClipToBounds="True"
+                                 RippleFill="{TemplateBinding assists:ButtonAssist.ClickFeedbackColor}"
+                                 RippleOpacity="{StaticResource ButtonPressedOpacity}">
+              <ContentPresenter Name="PART_ContentPresenter"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                Padding="{TemplateBinding Padding}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
+            </ripple:RippleEffect>
           </Panel>
         </Border>
       </ControlTemplate>
@@ -64,6 +121,7 @@
 
     <Style Selector="^:not(:disabled):pointerover /template/ Border#PART_HoverEffect">
       <Setter Property="Opacity" Value="{StaticResource ButtonHoveredOpacity}" />
+      <Setter Property="assists:ShadowAssist.Darken" Value="True" />
     </Style>
 
     <Style Selector="^.no-ripple /template/ ripple|RippleEffect#PART_Ripple">
@@ -74,83 +132,73 @@
       <Setter Property="Opacity" Value="{StaticResource ButtonDisabledOpacity}" />
     </Style>
 
-    <Style Selector="^.accent">
-      <Setter Property="Background" Value="{DynamicResource MaterialSecondaryMidBrush}" />
-      <Setter Property="BorderBrush" Value="{DynamicResource MaterialSecondaryMidBrush}" />
-      <Setter Property="Foreground" Value="{DynamicResource MaterialSecondaryMidForegroundBrush}" />
-    </Style>
-
-    <Style Selector="^.light">
-      <Setter Property="Background" Value="{DynamicResource MaterialPrimaryLightBrush}" />
-      <Setter Property="BorderBrush" Value="{DynamicResource MaterialPrimaryLightBrush}" />
-      <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryLightForegroundBrush}" />
+    <Style Selector="^:checked /template/ Border#PART_Background">
+      <Setter Property="Opacity" Value="{DynamicResource ButtonToggledOpacity}" />
     </Style>
 
-    <Style Selector="^.dark">
-      <Setter Property="Background" Value="{DynamicResource MaterialPrimaryDarkBrush}" />
-      <Setter Property="BorderBrush" Value="{DynamicResource MaterialPrimaryDarkBrush}" />
-      <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryForegroundBrush}" />
+    <Style Selector="^.primary">
+      <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryMidBrush}" />
     </Style>
-  </ControlTheme>
-
-  <ControlTheme x:Key="{x:Type ToggleButton}" TargetType="ToggleButton"
-                BasedOn="{StaticResource MaterialToggleButton}" />
-
-  <ControlTheme x:Key="MaterialFlatToggleButton" TargetType="ToggleButton"
-                BasedOn="{StaticResource MaterialToggleButton}">
-    <Setter Property="Background" Value="Transparent" />
-    <Setter Property="BorderBrush" Value="Transparent" />
-    <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryMidBrush}" />
 
     <Style Selector="^.accent">
-      <Setter Property="Background" Value="Transparent" />
-      <Setter Property="BorderBrush" Value="Transparent" />
       <Setter Property="Foreground" Value="{DynamicResource MaterialSecondaryMidBrush}" />
     </Style>
 
     <Style Selector="^.light">
-      <Setter Property="Background" Value="Transparent" />
-      <Setter Property="BorderBrush" Value="Transparent" />
       <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryLightBrush}" />
     </Style>
 
     <Style Selector="^.dark">
-      <Setter Property="Background" Value="Transparent" />
-      <Setter Property="BorderBrush" Value="Transparent" />
       <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryDarkBrush}" />
     </Style>
   </ControlTheme>
 
-  <ControlTheme x:Key="MaterialOutlineToggleButton"
-                BasedOn="{StaticResource MaterialToggleButton}"
-                TargetType="ToggleButton">
-    <Setter Property="HorizontalContentAlignment" Value="Center" />
-    <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="Background" Value="Transparent" />
-    <Setter Property="BorderThickness" Value="1" />
-    <Setter Property="BorderBrush" Value="{DynamicResource MaterialPrimaryMidBrush}" />
-    <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryMidBrush}" />
-    <Setter Property="Padding" Value="16 6" />
-    <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth0" />
+  <ControlTheme x:Key="MaterialToggleButton" TargetType="ToggleButton"
+                BasedOn="{StaticResource MaterialFlatToggleButton}">
+    <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth1" />
 
-    <Style Selector="^.accent">
-      <Setter Property="BorderBrush" Value="{DynamicResource MaterialSecondaryMidBrush}" />
-      <Setter Property="Foreground" Value="{DynamicResource MaterialSecondaryMidBrush}" />
+    <Style Selector="^:not(.no-transitions) /template/ Border#PART_HoverEffect">
+      <Setter Property="Transitions">
+        <Transitions>
+          <DoubleTransition Duration="0:0:0.25" Property="Opacity" Easing="LinearEasing" />
+        </Transitions>
+      </Setter>
     </Style>
 
-    <Style Selector="^.light">
-      <Setter Property="BorderBrush" Value="{DynamicResource MaterialPrimaryLightBrush}" />
-      <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryLightBrush}" />
+    <Style Selector="^ /template/ Border#PART_HoverEffect">
+      <Setter Property="Opacity" Value="0" />
     </Style>
 
-    <Style Selector="^.dark">
-      <Setter Property="BorderBrush" Value="{DynamicResource MaterialPrimaryDarkBrush}" />
-      <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryDarkBrush}" />
+    <Style Selector="^:not(:disabled):pointerover /template/ Border#PART_HoverEffect">
+      <Setter Property="Opacity" Value="{StaticResource ButtonHoveredOpacity}" />
+      <Setter Property="assists:ShadowAssist.Darken" Value="True" />
     </Style>
+
+    <Style Selector="^.no-ripple /template/ ripple|RippleEffect#PART_Ripple">
+      <Setter Property="IsAllowedRaiseRipple" Value="False" />
+    </Style>
+
+    <Style Selector="^:disabled /template/ Border#PART_RootBorder">
+      <Setter Property="Opacity" Value="{StaticResource ButtonDisabledOpacity}" />
+    </Style>
+
+    <Style Selector="^:checked /template/ Border#PART_Background">
+      <Setter Property="Opacity" Value="{DynamicResource ButtonToggledOpacity}" />
+    </Style>
+  </ControlTheme>
+
+  <ControlTheme x:Key="{x:Type ToggleButton}" TargetType="ToggleButton"
+                BasedOn="{StaticResource MaterialToggleButton}" />
+
+  <ControlTheme x:Key="MaterialOutlineToggleButton" TargetType="ToggleButton"
+                BasedOn="{StaticResource MaterialFlatToggleButton}">
+    <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="BorderBrush" Value="{Binding $self.Foreground}" />
+    <Setter Property="Padding" Value="16 6" />
   </ControlTheme>
 
   <ControlTheme x:Key="MaterialIconToggleButton" TargetType="ToggleButton"
-                BasedOn="{StaticResource MaterialToggleButton}">
+                BasedOn="{StaticResource MaterialFlatToggleButton}">
     <Setter Property="Padding" Value="12" />
     <Setter Property="CornerRadius" Value="24" />
     <Setter Property="Height" Value="48" />

From b0119881950b52f155416f985b331cb257a0af50 Mon Sep 17 00:00:00 2001
From: SKProCH <skproch@yandex.ru>
Date: Sun, 28 Apr 2024 22:50:16 +0300
Subject: [PATCH 2/5] Make default MaterialFlatButton use default color (not
 primary), add .primary pseudoclass

---
 Material.Avalonia.Demo/MainView.axaml         |   1 +
 .../Pages/ButtonsDemo.axaml                   | 353 +++++++++---------
 Material.Avalonia.Demo/Pages/Home.axaml       |  10 +-
 Material.Styles/Resources/Themes/Button.axaml |  53 ++-
 4 files changed, 220 insertions(+), 197 deletions(-)

diff --git a/Material.Avalonia.Demo/MainView.axaml b/Material.Avalonia.Demo/MainView.axaml
index 090374a9..05ee5dd7 100644
--- a/Material.Avalonia.Demo/MainView.axaml
+++ b/Material.Avalonia.Demo/MainView.axaml
@@ -102,6 +102,7 @@
                 <ColumnDefinition Width="Auto" />
               </Grid.ColumnDefinitions>
               <ToggleButton Name="NavDrawerSwitch"
+                            Theme="{StaticResource MaterialFlatButton}"
                             Width="32" Height="32" Padding="4">
                 <avalonia:MaterialIcon Kind="Menu" Width="24" Height="24" />
               </ToggleButton>
diff --git a/Material.Avalonia.Demo/Pages/ButtonsDemo.axaml b/Material.Avalonia.Demo/Pages/ButtonsDemo.axaml
index 6ca2ed94..52e3b697 100644
--- a/Material.Avalonia.Demo/Pages/ButtonsDemo.axaml
+++ b/Material.Avalonia.Demo/Pages/ButtonsDemo.axaml
@@ -7,185 +7,188 @@
              xmlns:controls="clr-namespace:Material.Styles.Controls;assembly=Material.Styles"
              xmlns:showMeTheXaml="clr-namespace:ShowMeTheXaml;assembly=ShowMeTheXaml.Avalonia"
              x:Class="Material.Avalonia.Demo.Pages.ButtonsDemo">
-    <StackPanel Margin="16, 0">
-        <StackPanel.Styles>
-            <Style Selector="Button">
-                <Setter Property="IsEnabled"
-                        Value="{Binding ElementName=IsEnabledCheckBox, Path=IsChecked}"/>
-            </Style>
-            
-            <Style Selector="controls|FloatingButton">
-                <Setter Property="IsEnabled"
-                        Value="{Binding ElementName=IsEnabledCheckBox, Path=IsChecked}"/>
-            </Style>
-        </StackPanel.Styles>
-        
-        <TextBlock Classes="Headline4 Subheadline" Text="Buttons" />
-        <CheckBox Name="IsEnabledCheckBox"
-                  Content="Buttons is enabled"
-                  IsChecked="True"/>
-        
-        <TextBlock Classes="Headline6 Subheadline2" Text="Regular buttons" />
-        <StackPanel Orientation="Horizontal">
-            <showMeTheXaml:XamlDisplay UniqueId="Buttons1">
-                <Button Classes="light" Content="Light" ToolTip.Tip='Button with classes "Light"' />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="Buttons2">
-                <Button Content="Mid (Default)" ToolTip.Tip='Regular button without any classes.' />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="Buttons3">
-                <Button Classes="dark" Content="Dark" ToolTip.Tip='Button with classes "Dark"' />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="Buttons4">
-                <Button Classes="accent" Content="Accent" ToolTip.Tip='Button with classes "Accent"' />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="Buttons5">
-                <Button Content="Custom corner radius"
-                        ToolTip.Tip='Regular button with customized corner radius (16dp).'
-                        CornerRadius="16" />
-            </showMeTheXaml:XamlDisplay>
-        </StackPanel>
+  <StackPanel Margin="16, 0">
+    <StackPanel.Styles>
+      <Style Selector="Button">
+        <Setter Property="IsEnabled"
+                Value="{Binding ElementName=IsEnabledCheckBox, Path=IsChecked}" />
+      </Style>
 
-        <TextBlock Classes="Headline6 Subheadline2" Text="Outline buttons" />
-        <StackPanel Orientation="Horizontal">
-            <StackPanel.Styles>
-                <Style Selector="showMeTheXaml|XamlDisplay">
-                    <Setter Property="Margin" Value="8" />
-                </Style>
-            </StackPanel.Styles>
-            <showMeTheXaml:XamlDisplay UniqueId="OutlineButtons0">
-              <Button Theme="{StaticResource MaterialOutlineButton}" Classes="light" Content="Light" ToolTip.Tip='Button with classes "Light" and "Outline"' />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="OutlineButtons1">
-              <Button Theme="{StaticResource MaterialOutlineButton}" Content="Mid (Default)" ToolTip.Tip='Button with classes "Outline"' />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="OutlineButtons2">
-              <Button Theme="{StaticResource MaterialOutlineButton}" Classes="dark" Content="Dark" ToolTip.Tip='Button with classes "Dark" and "Outline"' />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="OutlineButtons3">
-              <Button Theme="{StaticResource MaterialOutlineButton}" Classes="accent" Content="Accent"
-                      ToolTip.Tip='Button with classes "Accent" and "Outline"' />
-            </showMeTheXaml:XamlDisplay>
+      <Style Selector="controls|FloatingButton">
+        <Setter Property="IsEnabled"
+                Value="{Binding ElementName=IsEnabledCheckBox, Path=IsChecked}" />
+      </Style>
+    </StackPanel.Styles>
 
-            <showMeTheXaml:XamlDisplay UniqueId="OutlineButtons4">
-              <Button Theme="{StaticResource MaterialOutlineButton}" Content="Custom corner radius"
-                      ToolTip.Tip='Outline button with customized corner radius (16dp).'
-                      CornerRadius="16" />
-            </showMeTheXaml:XamlDisplay>
-        </StackPanel>
+    <TextBlock Classes="Headline4 Subheadline" Text="Buttons" />
+    <CheckBox Name="IsEnabledCheckBox"
+              Content="Buttons is enabled"
+              IsChecked="True" />
 
-        <TextBlock Classes="Headline6 Subheadline2" Text="Floating buttons with icon" />
-        <StackPanel Orientation="Horizontal">
-            <StackPanel.Styles>
-                <Style Selector="controls|FloatingButton">
-                    <Setter Property="Content">
-                        <Setter.Value>
-                            <Template>
-                                <Viewbox Stretch="Fill"
-                                         HorizontalAlignment="Stretch"
-                                         VerticalAlignment="Stretch">
-                                    <avalonia:MaterialIcon Kind="Plus" Width="24" Height="24" />
-                                </Viewbox>
-                            </Template>
-                        </Setter.Value>
-                    </Setter>
-                </Style>
-                <Style Selector="showMeTheXaml|XamlDisplay">
-                    <Setter Property="Margin" Value="16, 8" />
-                </Style>
-            </StackPanel.Styles>
-            <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons0">
-                <controls:FloatingButton Classes="Light Mini" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons1">
-                <controls:FloatingButton Classes="Mini" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons2">
-                <controls:FloatingButton Classes="Dark Mini" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons3">
-                <controls:FloatingButton Classes="Accent Mini" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons4">
-                <controls:FloatingButton Classes="Light" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons5">
-                <controls:FloatingButton />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons6">
-                <controls:FloatingButton Classes="Dark" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons7">
-                <controls:FloatingButton Classes="Accent" />
-            </showMeTheXaml:XamlDisplay>
-        </StackPanel>
+    <TextBlock Classes="Headline6 Subheadline2" Text="Regular buttons" />
+    <StackPanel Orientation="Horizontal">
+      <showMeTheXaml:XamlDisplay UniqueId="Buttons1">
+        <Button Classes="light" Content="Light" ToolTip.Tip='Button with classes "Light"' />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="Buttons2">
+        <Button Content="Mid (Default)" ToolTip.Tip='Regular button without any classes.' />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="Buttons3">
+        <Button Classes="dark" Content="Dark" ToolTip.Tip='Button with classes "Dark"' />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="Buttons4">
+        <Button Classes="accent" Content="Accent" ToolTip.Tip='Button with classes "Accent"' />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="Buttons5">
+        <Button Content="Custom corner radius"
+                ToolTip.Tip='Regular button with customized corner radius (16dp).'
+                CornerRadius="16" />
+      </showMeTheXaml:XamlDisplay>
+    </StackPanel>
+
+    <TextBlock Classes="Headline6 Subheadline2" Text="Outline buttons" />
+    <StackPanel Orientation="Horizontal">
+      <StackPanel.Styles>
+        <Style Selector="showMeTheXaml|XamlDisplay">
+          <Setter Property="Margin" Value="8" />
+        </Style>
+      </StackPanel.Styles>
+      <showMeTheXaml:XamlDisplay UniqueId="OutlineButtons0">
+        <Button Theme="{StaticResource MaterialOutlineButton}" Classes="light" Content="Light" ToolTip.Tip='Button with classes "Light" and "Outline"' />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="OutlineButtons1">
+        <Button Theme="{StaticResource MaterialOutlineButton}" Content="Mid (Default)" ToolTip.Tip='Button with classes "Outline"' />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="OutlineButtons2">
+        <Button Theme="{StaticResource MaterialOutlineButton}" Classes="dark" Content="Dark" ToolTip.Tip='Button with classes "Dark" and "Outline"' />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="OutlineButtons3">
+        <Button Theme="{StaticResource MaterialOutlineButton}" Classes="accent" Content="Accent"
+                ToolTip.Tip='Button with classes "Accent" and "Outline"' />
+      </showMeTheXaml:XamlDisplay>
 
-        <TextBlock Classes="Headline6 Subheadline2" Text="Extended floating buttons" />
-        <StackPanel Orientation="Horizontal">
-            <StackPanel.Styles>
-                <Style Selector="showMeTheXaml|XamlDisplay">
-                    <Setter Property="Margin" Value="8" />
-                </Style>
-                <Style Selector="controls|FloatingButton[IsExtended=false]">
-                    <Setter Property="Content">
-                        <Setter.Value>
-                            <Template>
-                                <Viewbox Stretch="Fill"
-                                         HorizontalAlignment="Stretch"
-                                         VerticalAlignment="Stretch">
-                                    <avalonia:MaterialIcon Kind="Plus" Width="24" Height="24" />
-                                </Viewbox>
-                            </Template>
-                        </Setter.Value>
-                    </Setter>
-                </Style>
-                <Style Selector="controls|FloatingButton[IsExtended=true]">
-                    <Setter Property="Content">
-                        <Setter.Value>
-                            <Template>
-                                <StackPanel Orientation="Horizontal" Height="24">
-                                    <Viewbox Stretch="Fill"
-                                             HorizontalAlignment="Stretch"
-                                             VerticalAlignment="Stretch">
-                                        <avalonia:MaterialIcon Kind="Plus" Width="24" Height="24" />
-                                    </Viewbox>
-                                    <TextBlock Margin="8,0" Text="ADD ITEM" Classes="Subtitle2"
-                                               VerticalAlignment="Center" />
-                                </StackPanel>
-                            </Template>
-                        </Setter.Value>
-                    </Setter>
-                </Style>
-            </StackPanel.Styles>
-            <showMeTheXaml:XamlDisplay UniqueId="ExpandedFloatingButton0">
-                <controls:FloatingButton Classes="Light" IsExtended="True" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="ExpandedFloatingButton1">
-                <controls:FloatingButton IsExtended="True" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="ExpandedFloatingButton2">
-                <controls:FloatingButton Classes="Dark" IsExtended="True" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="ExpandedFloatingButton3">
-                <controls:FloatingButton Classes="Accent" IsExtended="{Binding ElementName=CheckBox1, Path=IsChecked}" />
-            </showMeTheXaml:XamlDisplay>
-            <CheckBox Name="CheckBox1" Content="IsExtended" Margin="16,8" />
-        </StackPanel>
+      <showMeTheXaml:XamlDisplay UniqueId="OutlineButtons4">
+        <Button Theme="{StaticResource MaterialOutlineButton}" Content="Custom corner radius"
+                ToolTip.Tip='Outline button with customized corner radius (16dp).'
+                CornerRadius="16" />
+      </showMeTheXaml:XamlDisplay>
+    </StackPanel>
 
-        <TextBlock Classes="Headline6 Subheadline2" Text="Flat buttons" />
-        <StackPanel Orientation="Horizontal">
-            <StackPanel.Styles>
-                <Style Selector="showMeTheXaml|XamlDisplay">
-                    <Setter Property="Margin" Value="8" />
-                </Style>
-            </StackPanel.Styles>
-            <showMeTheXaml:XamlDisplay UniqueId="FlatButtons0">
-              <Button Theme="{StaticResource MaterialFlatButton}" Content="Default" ToolTip.Tip='Regular button with class "Flat"' />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="FlatButtons1">
-              <Button Theme="{StaticResource MaterialFlatButton}" Classes="accent" Content="Accent" ToolTip.Tip='Button with classes "Accent" and "Flat"' />
-            </showMeTheXaml:XamlDisplay>
-        </StackPanel>
+    <TextBlock Classes="Headline6 Subheadline2" Text="Floating buttons with icon" />
+    <StackPanel Orientation="Horizontal">
+      <StackPanel.Styles>
+        <Style Selector="controls|FloatingButton">
+          <Setter Property="Content">
+            <Setter.Value>
+              <Template>
+                <Viewbox Stretch="Fill"
+                         HorizontalAlignment="Stretch"
+                         VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Plus" Width="24" Height="24" />
+                </Viewbox>
+              </Template>
+            </Setter.Value>
+          </Setter>
+        </Style>
+        <Style Selector="showMeTheXaml|XamlDisplay">
+          <Setter Property="Margin" Value="16, 8" />
+        </Style>
+      </StackPanel.Styles>
+      <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons0">
+        <controls:FloatingButton Classes="Light Mini" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons1">
+        <controls:FloatingButton Classes="Mini" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons2">
+        <controls:FloatingButton Classes="Dark Mini" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons3">
+        <controls:FloatingButton Classes="Accent Mini" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons4">
+        <controls:FloatingButton Classes="Light" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons5">
+        <controls:FloatingButton />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons6">
+        <controls:FloatingButton Classes="Dark" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="FloatingButtons7">
+        <controls:FloatingButton Classes="Accent" />
+      </showMeTheXaml:XamlDisplay>
+    </StackPanel>
 
+    <TextBlock Classes="Headline6 Subheadline2" Text="Extended floating buttons" />
+    <StackPanel Orientation="Horizontal">
+      <StackPanel.Styles>
+        <Style Selector="showMeTheXaml|XamlDisplay">
+          <Setter Property="Margin" Value="8" />
+        </Style>
+        <Style Selector="controls|FloatingButton[IsExtended=false]">
+          <Setter Property="Content">
+            <Setter.Value>
+              <Template>
+                <Viewbox Stretch="Fill"
+                         HorizontalAlignment="Stretch"
+                         VerticalAlignment="Stretch">
+                  <avalonia:MaterialIcon Kind="Plus" Width="24" Height="24" />
+                </Viewbox>
+              </Template>
+            </Setter.Value>
+          </Setter>
+        </Style>
+        <Style Selector="controls|FloatingButton[IsExtended=true]">
+          <Setter Property="Content">
+            <Setter.Value>
+              <Template>
+                <StackPanel Orientation="Horizontal" Height="24">
+                  <Viewbox Stretch="Fill"
+                           HorizontalAlignment="Stretch"
+                           VerticalAlignment="Stretch">
+                    <avalonia:MaterialIcon Kind="Plus" Width="24" Height="24" />
+                  </Viewbox>
+                  <TextBlock Margin="8,0" Text="ADD ITEM" Classes="Subtitle2"
+                             VerticalAlignment="Center" />
+                </StackPanel>
+              </Template>
+            </Setter.Value>
+          </Setter>
+        </Style>
+      </StackPanel.Styles>
+      <showMeTheXaml:XamlDisplay UniqueId="ExpandedFloatingButton0">
+        <controls:FloatingButton Classes="Light" IsExtended="True" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="ExpandedFloatingButton1">
+        <controls:FloatingButton IsExtended="True" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="ExpandedFloatingButton2">
+        <controls:FloatingButton Classes="Dark" IsExtended="True" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="ExpandedFloatingButton3">
+        <controls:FloatingButton Classes="Accent" IsExtended="{Binding ElementName=CheckBox1, Path=IsChecked}" />
+      </showMeTheXaml:XamlDisplay>
+      <CheckBox Name="CheckBox1" Content="IsExtended" Margin="16,8" />
     </StackPanel>
-</UserControl>
+
+    <TextBlock Classes="Headline6 Subheadline2" Text="Flat buttons" />
+    <StackPanel Orientation="Horizontal">
+      <StackPanel.Styles>
+        <Style Selector="showMeTheXaml|XamlDisplay">
+          <Setter Property="Margin" Value="8" />
+        </Style>
+      </StackPanel.Styles>
+      <showMeTheXaml:XamlDisplay UniqueId="FlatButtons0">
+        <Button Theme="{StaticResource MaterialFlatButton}" Content="Default" ToolTip.Tip='Regular button with class "Flat"' />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="FlatButtons1">
+        <Button Theme="{StaticResource MaterialFlatButton}" Classes="primary" Content="Primary" ToolTip.Tip='Regular button with class "Flat"' />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="FlatButtons2">
+        <Button Theme="{StaticResource MaterialFlatButton}" Classes="accent" Content="Accent" ToolTip.Tip='Button with classes "Accent" and "Flat"' />
+      </showMeTheXaml:XamlDisplay>
+    </StackPanel>
+
+  </StackPanel>
+</UserControl>
\ No newline at end of file
diff --git a/Material.Avalonia.Demo/Pages/Home.axaml b/Material.Avalonia.Demo/Pages/Home.axaml
index b3fadb4f..01458726 100644
--- a/Material.Avalonia.Demo/Pages/Home.axaml
+++ b/Material.Avalonia.Demo/Pages/Home.axaml
@@ -33,13 +33,13 @@
                 </Style>
             </StackPanel.Styles>
             <WrapPanel HorizontalAlignment="Center" MaxWidth="600">
-                <Button Content="PROJECT LINK" Command="{Binding Path=OpenProjectRepoLink}" />
-                <Button Content="USE DARK THEME" Command="{Binding Path=UseMaterialUIDarkTheme}" />
-                <Button Content="USE LIGHT THEME" Command="{Binding Path=UseMaterialUILightTheme}" />
+                <Button Content="PROJECT LINK" Classes="primary" Command="{Binding Path=OpenProjectRepoLink}" />
+                <Button Content="USE DARK THEME" Classes="primary" Command="{Binding Path=UseMaterialUIDarkTheme}" />
+                <Button Content="USE LIGHT THEME" Classes="primary" Command="{Binding Path=UseMaterialUILightTheme}" />
             </WrapPanel>
             <WrapPanel HorizontalAlignment="Center" MaxWidth="600">
-                <Button Content="SWITCH TRANSITIONS" Command="{Binding Path=SwitchTransition}" />
-                <Button Content="ABOUT AVALONIAUI" Command="{Binding Path=ShowAboutAvaloniaUI}" />
+                <Button Content="SWITCH TRANSITIONS" Classes="primary" Command="{Binding Path=SwitchTransition}" />
+                <Button Content="ABOUT AVALONIAUI" Classes="primary" Command="{Binding Path=ShowAboutAvaloniaUI}" />
             </WrapPanel>
         </StackPanel>
         <!-- Features listing is disabled. -->
diff --git a/Material.Styles/Resources/Themes/Button.axaml b/Material.Styles/Resources/Themes/Button.axaml
index 246c4166..cdd957a4 100644
--- a/Material.Styles/Resources/Themes/Button.axaml
+++ b/Material.Styles/Resources/Themes/Button.axaml
@@ -9,20 +9,15 @@
   <system:Double x:Key="ButtonPressedOpacity">0.26</system:Double>
   <converters:BrushRoundConverter x:Key="BrushRoundConverter" />
 
-  <ControlTheme x:Key="MaterialButton" TargetType="Button">
+  <ControlTheme x:Key="MaterialButtonBase" TargetType="Button">
     <Setter Property="CornerRadius" Value="4" />
     <Setter Property="HorizontalContentAlignment" Value="Center" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
-    <Setter Property="Background" Value="{DynamicResource MaterialPrimaryMidBrush}" />
-    <Setter Property="BorderBrush" Value="{DynamicResource MaterialPrimaryMidBrush}" />
-    <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryMidForegroundBrush}" />
     <Setter Property="Cursor" Value="Hand" />
     <Setter Property="Padding" Value="16 8" />
-    <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth1" />
     <Setter Property="assists:ButtonAssist.HoverColor"
-            Value="{Binding Foreground,
-                              Converter={StaticResource BrushRoundConverter}, RelativeSource={RelativeSource Self}}" />
-    <Setter Property="assists:ButtonAssist.ClickFeedbackColor" Value="#000000" />
+            Value="{Binding $self.Foreground, Converter={StaticResource BrushRoundConverter}}" />
+    <Setter Property="assists:ButtonAssist.ClickFeedbackColor" Value="{Binding $self.Foreground}" />
     <Setter Property="TextBlock.FontWeight" Value="Medium" />
     <Setter Property="TextBlock.FontSize" Value="14" />
     <Setter Property="BorderThickness" Value="0" />
@@ -122,16 +117,38 @@
     </Style>
   </ControlTheme>
 
+  <ControlTheme x:Key="MaterialButton" TargetType="Button"
+                BasedOn="{StaticResource MaterialButtonBase}">
+    <Setter Property="Background" Value="{DynamicResource MaterialPrimaryMidBrush}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource MaterialPrimaryMidBrush}" />
+    <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryMidForegroundBrush}" />
+    <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth1" />
+
+    <Style Selector="^.light">
+      <Setter Property="Background" Value="{DynamicResource MaterialPrimaryLightBrush}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource MaterialPrimaryLightBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryLightForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^.dark">
+      <Setter Property="Background" Value="{DynamicResource MaterialPrimaryDarkBrush}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource MaterialPrimaryDarkBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryForegroundBrush}" />
+    </Style>
+
+    <Style Selector="^.accent">
+      <Setter Property="Background" Value="{DynamicResource MaterialSecondaryMidBrush}" />
+      <Setter Property="BorderBrush" Value="{DynamicResource MaterialSecondaryMidBrush}" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialSecondaryMidForegroundBrush}" />
+    </Style>
+  </ControlTheme>
+
   <ControlTheme x:Key="{x:Type Button}" TargetType="Button"
                 BasedOn="{StaticResource MaterialButton}" />
 
-
   <ControlTheme x:Key="MaterialOutlineButton"
-                BasedOn="{StaticResource MaterialButton}"
+                BasedOn="{StaticResource MaterialButtonBase}"
                 TargetType="Button">
-
-    <Setter Property="HorizontalContentAlignment" Value="Center" />
-    <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="BorderThickness" Value="1" />
     <Setter Property="BorderBrush" Value="{DynamicResource MaterialPrimaryMidBrush}" />
@@ -141,7 +158,6 @@
 
     <!-- Colour variants -->
 
-
     <Style Selector="^.accent">
       <Setter Property="Background" Value="Transparent" />
       <Setter Property="BorderBrush" Value="{DynamicResource MaterialSecondaryMidBrush}" />
@@ -169,14 +185,12 @@
   </ControlTheme>
 
   <ControlTheme x:Key="MaterialFlatButton"
-                BasedOn="{StaticResource MaterialButton}"
+                BasedOn="{StaticResource MaterialButtonBase}"
                 TargetType="Button">
-
     <Setter Property="HorizontalContentAlignment" Value="Center" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="BorderBrush" Value="Transparent" />
-    <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryMidBrush}" />
     <Setter Property="Padding" Value="16 6" />
     <Setter Property="assists:ShadowAssist.ShadowDepth" Value="Depth0" />
     <Setter Property="assists:ButtonAssist.HoverColor" Value="{DynamicResource MaterialBodyBrush}" />
@@ -184,6 +198,11 @@
 
     <!-- Colour variants -->
 
+    <Style Selector="^.primary">
+      <Setter Property="Background" Value="Transparent" />
+      <Setter Property="BorderBrush" Value="Transparent" />
+      <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryMidBrush}" />
+    </Style>
 
     <Style Selector="^.accent">
       <Setter Property="Background" Value="Transparent" />

From 0a8b36bb29bf221c0b886e0ed6aee5b5530744a7 Mon Sep 17 00:00:00 2001
From: SKProCH <skproch@yandex.ru>
Date: Sun, 28 Apr 2024 23:01:08 +0300
Subject: [PATCH 3/5] Update ToggleButton demo

---
 .../Pages/TogglesDemo.axaml                   | 440 +++++++++---------
 .../Resources/Themes/ToggleButton.axaml       |  54 +--
 2 files changed, 252 insertions(+), 242 deletions(-)

diff --git a/Material.Avalonia.Demo/Pages/TogglesDemo.axaml b/Material.Avalonia.Demo/Pages/TogglesDemo.axaml
index 16e37352..29d02072 100644
--- a/Material.Avalonia.Demo/Pages/TogglesDemo.axaml
+++ b/Material.Avalonia.Demo/Pages/TogglesDemo.axaml
@@ -2,224 +2,238 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="600"
+             mc:Ignorable="d" d:DesignWidth="800"
              xmlns:assist="clr-namespace:Material.Styles.Assists;assembly=Material.Styles"
              xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
              xmlns:showMeTheXaml="clr-namespace:ShowMeTheXaml;assembly=ShowMeTheXaml.Avalonia"
              xmlns:controls="clr-namespace:Material.Styles.Controls;assembly=Material.Styles"
              x:Class="Material.Avalonia.Demo.Pages.TogglesDemo">
-    <StackPanel Margin="16, 0">
-        <TextBlock Classes="Headline4 Subheadline" Text="Toggles" />
-
-        <TextBlock Classes="Headline6 Subheadline2" Text="Regular toggles" />
-        <StackPanel Orientation="Horizontal">
-            <StackPanel.Styles>
-                <Style Selector="showMeTheXaml|XamlDisplay">
-                    <Setter Property="Margin" Value="8" />
-                </Style>
-            </StackPanel.Styles>
-            <showMeTheXaml:XamlDisplay UniqueId="RegularToggles0">
-                <ToggleSwitch Content="Switch me!" ToolTip.Tip='Regular toggle switch without any classes.' />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="RegularToggles1">
-                <ToggleSwitch Content="Switch me too!" IsChecked="True" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="RegularToggles2">
-                <ToggleSwitch Content="You can't switch me!" IsEnabled="False" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="RegularToggles3">
-                <ToggleSwitch Content="Accent color" IsChecked="True" Classes="accent" />
-            </showMeTheXaml:XamlDisplay>
-        </StackPanel>
-
-        <TextBlock Classes="Headline6 Subheadline2" Text="Regular toggles (Left content alignmented)" />
-        <StackPanel Orientation="Horizontal">
-            <StackPanel.Styles>
-                <Style Selector="ToggleSwitch">
-                    <Setter Property="Margin" Value="8" />
-                </Style>
-            </StackPanel.Styles>
-            <showMeTheXaml:XamlDisplay UniqueId="RegularTogglesLeft0">
-                <ToggleSwitch Classes="LeftHeader" Content="Switch me!"
-                              ToolTip.Tip='ToggleSwitch with classes "LeftHeader"' />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="RegularTogglesLeft1">
-                <ToggleSwitch Classes="LeftHeader" Content="Switch me too!" IsChecked="True" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="RegularTogglesLeft2">
-                <ToggleSwitch Classes="LeftHeader" Content="You can't switch me!" IsEnabled="False" />
-            </showMeTheXaml:XamlDisplay>
-
-        </StackPanel>
-
-        <TextBlock Classes="Headline6 Subheadline2" Text="Checkboxes" />
-        <StackPanel Orientation="Horizontal">
-            <StackPanel.Styles>
-                <Style Selector="showMeTheXaml|XamlDisplay">
-                    <Setter Property="Margin" Value="8" />
-                </Style>
-            </StackPanel.Styles>
-            <showMeTheXaml:XamlDisplay UniqueId="Checkboxes0">
-                <CheckBox Content="This is checkbox!" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="Checkboxes1">
-                <CheckBox Content="This is checkbox!" IsChecked="True" />
-            </showMeTheXaml:XamlDisplay>
-          <showMeTheXaml:XamlDisplay UniqueId="Checkboxes7">
-            <CheckBox Content="Indeterminate" IsChecked="{x:Null}" />
-          </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="Checkboxes2">
-                <CheckBox Content="Uncheckable" IsChecked="False" IsEnabled="False" />
-            </showMeTheXaml:XamlDisplay>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <StackPanel.Styles>
-                <Style Selector="showMeTheXaml|XamlDisplay">
-                    <Setter Property="Margin" Value="8" />
-                </Style>
-            </StackPanel.Styles>
-            <showMeTheXaml:XamlDisplay UniqueId="Checkboxes3">
-                <CheckBox Content="This is checkbox!" Classes="accent" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="Checkboxes4">
-                <CheckBox Content="This is checkbox!" Classes="accent" IsChecked="True"
-                          assist:SelectionControlAssist.Size="24" />
-            </showMeTheXaml:XamlDisplay>
-          <showMeTheXaml:XamlDisplay UniqueId="Checkboxes8">
-            <CheckBox Content="Indeterminate" Classes="accent" IsChecked="{x:Null}"/>
-          </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="Checkboxes5">
-                <CheckBox Content="Uncheckable" IsChecked="{x:Null}" IsEnabled="False" />
-            </showMeTheXaml:XamlDisplay>
-        </StackPanel>
-
-        <TextBlock Classes="Headline6 Subheadline2" Text="RadioButton" />
-        <StackPanel Orientation="Horizontal">
-            <StackPanel.Styles>
-                <Style Selector="showMeTheXaml|XamlDisplay">
-                    <Setter Property="Margin" Value="8" />
-                </Style>
-            </StackPanel.Styles>
-            <showMeTheXaml:XamlDisplay UniqueId="RadioButtons0">
-                <RadioButton GroupName="1" Content="This is radiobutton!" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="RadioButtons1">
-                <RadioButton GroupName="1" Content="This is radiobutton!" IsChecked="True" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="RadioButtons2">
-                <RadioButton GroupName="1" Content="Uncheckable" IsChecked="False" IsEnabled="False" />
-            </showMeTheXaml:XamlDisplay>
-        </StackPanel>
-        <StackPanel Orientation="Horizontal">
-            <StackPanel.Styles>
-                <Style Selector="showMeTheXaml|XamlDisplay">
-                    <Setter Property="Margin" Value="8" />
-                </Style>
-            </StackPanel.Styles>
-            <showMeTheXaml:XamlDisplay UniqueId="RadioButtons3">
-                <RadioButton Classes="accent" GroupName="2" Content="This is radiobutton!" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="RadioButtons4">
-                <RadioButton Classes="accent" GroupName="2" Content="This is radiobutton!" IsChecked="True" />
-            </showMeTheXaml:XamlDisplay>
-            <showMeTheXaml:XamlDisplay UniqueId="RadioButtons5">
-                <RadioButton Classes="accent" GroupName="2" Content="Uncheckable" IsChecked="False" IsEnabled="False" />
-            </showMeTheXaml:XamlDisplay>
-        </StackPanel>
-
-
-        <TextBlock Classes="Headline6 Subheadline2" Text="RadioButton (button-like)" />
-        <StackPanel Orientation="Horizontal">
-            <StackPanel.Styles>
+  <StackPanel Margin="16, 0">
+    <TextBlock Classes="Headline4 Subheadline" Text="Toggles" />
+
+    <TextBlock Classes="Headline6 Subheadline2" Text="Regular toggles" />
+    <StackPanel Orientation="Horizontal">
+      <StackPanel.Styles>
+        <Style Selector="showMeTheXaml|XamlDisplay">
+          <Setter Property="Margin" Value="8" />
+        </Style>
+      </StackPanel.Styles>
+      <showMeTheXaml:XamlDisplay UniqueId="RegularToggles0">
+        <ToggleSwitch Content="Switch me!" ToolTip.Tip='Regular toggle switch without any classes.' />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="RegularToggles1">
+        <ToggleSwitch Content="Switch me too!" IsChecked="True" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="RegularToggles2">
+        <ToggleSwitch Content="You can't switch me!" IsEnabled="False" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="RegularToggles3">
+        <ToggleSwitch Content="Accent color" IsChecked="True" Classes="accent" />
+      </showMeTheXaml:XamlDisplay>
+    </StackPanel>
+
+    <TextBlock Classes="Headline6 Subheadline2" Text="Regular toggles (Left content alignmented)" />
+    <StackPanel Orientation="Horizontal">
+      <StackPanel.Styles>
+        <Style Selector="ToggleSwitch">
+          <Setter Property="Margin" Value="8" />
+        </Style>
+      </StackPanel.Styles>
+      <showMeTheXaml:XamlDisplay UniqueId="RegularTogglesLeft0">
+        <ToggleSwitch Classes="LeftHeader" Content="Switch me!"
+                      ToolTip.Tip='ToggleSwitch with classes "LeftHeader"' />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="RegularTogglesLeft1">
+        <ToggleSwitch Classes="LeftHeader" Content="Switch me too!" IsChecked="True" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="RegularTogglesLeft2">
+        <ToggleSwitch Classes="LeftHeader" Content="You can't switch me!" IsEnabled="False" />
+      </showMeTheXaml:XamlDisplay>
+
+    </StackPanel>
+
+    <TextBlock Classes="Headline6 Subheadline2" Text="Checkboxes" />
+    <StackPanel Orientation="Horizontal">
+      <StackPanel.Styles>
+        <Style Selector="showMeTheXaml|XamlDisplay">
+          <Setter Property="Margin" Value="8" />
+        </Style>
+      </StackPanel.Styles>
+      <showMeTheXaml:XamlDisplay UniqueId="Checkboxes0">
+        <CheckBox Content="This is checkbox!" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="Checkboxes1">
+        <CheckBox Content="This is checkbox!" IsChecked="True" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="Checkboxes7">
+        <CheckBox Content="Indeterminate" IsChecked="{x:Null}" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="Checkboxes2">
+        <CheckBox Content="Uncheckable" IsChecked="False" IsEnabled="False" />
+      </showMeTheXaml:XamlDisplay>
+    </StackPanel>
+    <StackPanel Orientation="Horizontal">
+      <StackPanel.Styles>
+        <Style Selector="showMeTheXaml|XamlDisplay">
+          <Setter Property="Margin" Value="8" />
+        </Style>
+      </StackPanel.Styles>
+      <showMeTheXaml:XamlDisplay UniqueId="Checkboxes3">
+        <CheckBox Content="This is checkbox!" Classes="accent" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="Checkboxes4">
+        <CheckBox Content="This is checkbox!" Classes="accent" IsChecked="True"
+                  assist:SelectionControlAssist.Size="24" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="Checkboxes8">
+        <CheckBox Content="Indeterminate" Classes="accent" IsChecked="{x:Null}" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="Checkboxes5">
+        <CheckBox Content="Uncheckable" IsChecked="{x:Null}" IsEnabled="False" />
+      </showMeTheXaml:XamlDisplay>
+    </StackPanel>
+
+    <TextBlock Classes="Headline6 Subheadline2" Text="RadioButton" />
+    <StackPanel Orientation="Horizontal">
+      <StackPanel.Styles>
+        <Style Selector="showMeTheXaml|XamlDisplay">
+          <Setter Property="Margin" Value="8" />
+        </Style>
+      </StackPanel.Styles>
+      <showMeTheXaml:XamlDisplay UniqueId="RadioButtons0">
+        <RadioButton GroupName="1" Content="This is radiobutton!" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="RadioButtons1">
+        <RadioButton GroupName="1" Content="This is radiobutton!" IsChecked="True" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="RadioButtons2">
+        <RadioButton GroupName="1" Content="Uncheckable" IsChecked="False" IsEnabled="False" />
+      </showMeTheXaml:XamlDisplay>
+    </StackPanel>
+    <StackPanel Orientation="Horizontal">
+      <StackPanel.Styles>
+        <Style Selector="showMeTheXaml|XamlDisplay">
+          <Setter Property="Margin" Value="8" />
+        </Style>
+      </StackPanel.Styles>
+      <showMeTheXaml:XamlDisplay UniqueId="RadioButtons3">
+        <RadioButton Classes="accent" GroupName="2" Content="This is radiobutton!" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="RadioButtons4">
+        <RadioButton Classes="accent" GroupName="2" Content="This is radiobutton!" IsChecked="True" />
+      </showMeTheXaml:XamlDisplay>
+      <showMeTheXaml:XamlDisplay UniqueId="RadioButtons5">
+        <RadioButton Classes="accent" GroupName="2" Content="Uncheckable" IsChecked="False" IsEnabled="False" />
+      </showMeTheXaml:XamlDisplay>
+    </StackPanel>
+
+
+    <TextBlock Classes="Headline6 Subheadline2" Text="RadioButton (button-like)" />
+    <StackPanel Orientation="Horizontal">
+      <StackPanel.Styles>
+        <Style Selector="RadioButton">
+          <Setter Property="ToolTip.Tip"
+                  Value='RadioButton with "RadioButton" theme in StackPanel container with Card widget' />
+        </Style>
+        <Style Selector="RadioButton.accent">
+          <Setter Property="ToolTip.Tip"
+                  Value='RadioButton with "RadioButton" theme and "Accent" class in StackPanel container with Card widget' />
+        </Style>
+        <Style Selector="avalonia|MaterialIcon">
+          <Setter Property="Width" Value="24" />
+          <Setter Property="Height" Value="24" />
+        </Style>
+      </StackPanel.Styles>
+      <StackPanel Orientation="Vertical">
+        <showMeTheXaml:XamlDisplay UniqueId="RadioButtonsCard0">
+          <controls:Card Padding="0" InsideClipping="True">
+            <controls:Card.Styles>
               <Style Selector="RadioButton">
-                    <Setter Property="ToolTip.Tip"
-                            Value='RadioButton with "RadioButton" theme in StackPanel container with Card widget' />
-                </Style>
-              <Style Selector="RadioButton.accent">
-                    <Setter Property="ToolTip.Tip"
-                            Value='RadioButton with "RadioButton" theme and "Accent" class in StackPanel container with Card widget' />
-                </Style>
-                <Style Selector="avalonia|MaterialIcon">
-                    <Setter Property="Width" Value="24" />
-                    <Setter Property="Height" Value="24" />
-                </Style>
-            </StackPanel.Styles>
-            <StackPanel Orientation="Vertical">
-                <showMeTheXaml:XamlDisplay UniqueId="RadioButtonsCard0">
-                    <controls:Card Padding="0" InsideClipping="True">
-                      <controls:Card.Styles>
-                        <Style Selector="RadioButton">
-                          <Setter Property="Theme" Value="{StaticResource MaterialButtonlikeRadioButton}" />
-                        </Style>
-                      </controls:Card.Styles>
-                      <StackPanel Orientation="Horizontal">
-                        <RadioButton GroupName="3"
-                                     Content="{avalonia:MaterialIconExt Kind=FormatAlignLeft}" />
-                        <RadioButton GroupName="3"
-                                     Content="{avalonia:MaterialIconExt Kind=FormatAlignCenter}"
-                                     IsChecked="True" />
-                        <RadioButton GroupName="3"
-                                     Content="{avalonia:MaterialIconExt Kind=FormatAlignRight}"
-                                     IsEnabled="False" />
-                        <RadioButton GroupName="3"
-                                     Content="{avalonia:MaterialIconExt Kind=FormatAlignJustify}" />
-                        </StackPanel>
-                    </controls:Card>
-                </showMeTheXaml:XamlDisplay>
-
-                <showMeTheXaml:XamlDisplay UniqueId="RadioButtonsCard1">
-                    <controls:Card Padding="0" InsideClipping="True" Margin="0,16,0,0">
-                      <controls:Card.Styles>
-                        <Style Selector="RadioButton">
-                          <Setter Property="Theme" Value="{StaticResource MaterialButtonlikeRadioButton}" />
-                        </Style>
-                      </controls:Card.Styles>
-                      <StackPanel Orientation="Horizontal">
-                        <RadioButton Classes="accent" GroupName="4"
-                                     Content="{avalonia:MaterialIconExt Kind=FormatAlignLeft}" />
-                        <RadioButton Classes="accent" GroupName="4"
-                                     Content="{avalonia:MaterialIconExt Kind=FormatAlignCenter}" IsChecked="True" />
-                        <RadioButton Classes="accent" GroupName="4"
-                                     Content="{avalonia:MaterialIconExt Kind=FormatAlignRight}" IsEnabled="False" />
-                        <RadioButton Classes="accent" GroupName="4"
-                                     Content="{avalonia:MaterialIconExt Kind=FormatAlignJustify}" />
-                        </StackPanel>
-                    </controls:Card>
-                </showMeTheXaml:XamlDisplay>
+                <Setter Property="Theme" Value="{StaticResource MaterialButtonlikeRadioButton}" />
+              </Style>
+            </controls:Card.Styles>
+            <StackPanel Orientation="Horizontal">
+              <RadioButton GroupName="3"
+                           Content="{avalonia:MaterialIconExt Kind=FormatAlignLeft}" />
+              <RadioButton GroupName="3"
+                           Content="{avalonia:MaterialIconExt Kind=FormatAlignCenter}"
+                           IsChecked="True" />
+              <RadioButton GroupName="3"
+                           Content="{avalonia:MaterialIconExt Kind=FormatAlignRight}"
+                           IsEnabled="False" />
+              <RadioButton GroupName="3"
+                           Content="{avalonia:MaterialIconExt Kind=FormatAlignJustify}" />
             </StackPanel>
-        </StackPanel>
-        
-        <TextBlock Classes="Headline6 Subheadline2" Text="ToggleButtons" />
-        <StackPanel Orientation="Horizontal">
-            <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons0">
-                <ToggleButton>ToggleButton</ToggleButton>
-            </showMeTheXaml:XamlDisplay>
-
-            <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons1">
-                <ToggleButton Classes="NoFeedback">NoFeedback</ToggleButton>
-            </showMeTheXaml:XamlDisplay>
-            
-            <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons2">
-                <ToggleButton IsEnabled="False">Disabled</ToggleButton>
-            </showMeTheXaml:XamlDisplay>
-            
-            <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons3">
-                <StackPanel Orientation="Horizontal">
-                    <TextBlock VerticalAlignment="Center" Margin="0 0 8 0" Text="Icon:"/>
-                    <ToggleButton Classes="Icon">
-                        <avalonia:MaterialIcon Kind="Globe" />
-                    </ToggleButton>
-                </StackPanel>
-            </showMeTheXaml:XamlDisplay>
-            
-            <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons4">
-                <StackPanel Orientation="Horizontal">
-                    <TextBlock VerticalAlignment="Center" Margin="0 0 8 0" Text="Icon NoFeedback:"/>
-                    <ToggleButton Classes="Icon NoFeedback">
-                        <avalonia:MaterialIcon Kind="Globe" />
-                    </ToggleButton>
-                </StackPanel>
-            </showMeTheXaml:XamlDisplay>
-        </StackPanel>
+          </controls:Card>
+        </showMeTheXaml:XamlDisplay>
+
+        <showMeTheXaml:XamlDisplay UniqueId="RadioButtonsCard1">
+          <controls:Card Padding="0" InsideClipping="True" Margin="0,16,0,0">
+            <controls:Card.Styles>
+              <Style Selector="RadioButton">
+                <Setter Property="Theme" Value="{StaticResource MaterialButtonlikeRadioButton}" />
+              </Style>
+            </controls:Card.Styles>
+            <StackPanel Orientation="Horizontal">
+              <RadioButton Classes="accent" GroupName="4"
+                           Content="{avalonia:MaterialIconExt Kind=FormatAlignLeft}" />
+              <RadioButton Classes="accent" GroupName="4"
+                           Content="{avalonia:MaterialIconExt Kind=FormatAlignCenter}" IsChecked="True" />
+              <RadioButton Classes="accent" GroupName="4"
+                           Content="{avalonia:MaterialIconExt Kind=FormatAlignRight}" IsEnabled="False" />
+              <RadioButton Classes="accent" GroupName="4"
+                           Content="{avalonia:MaterialIconExt Kind=FormatAlignJustify}" />
+            </StackPanel>
+          </controls:Card>
+        </showMeTheXaml:XamlDisplay>
+      </StackPanel>
     </StackPanel>
-</UserControl>
+
+    <TextBlock Classes="Headline6 Subheadline2" Text="ToggleButtons" />
+    <WrapPanel Orientation="Horizontal">
+      <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons0">
+        <ToggleButton>ToggleButton</ToggleButton>
+      </showMeTheXaml:XamlDisplay>
+
+      <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons1">
+        <ToggleButton Classes="no-ripple">No feedback</ToggleButton>
+      </showMeTheXaml:XamlDisplay>
+
+      <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons2">
+        <ToggleButton IsEnabled="False">Disabled</ToggleButton>
+      </showMeTheXaml:XamlDisplay>
+
+      <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons3">
+        <ToggleButton Classes="primary">Primary</ToggleButton>
+      </showMeTheXaml:XamlDisplay>
+
+      <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons4">
+        <ToggleButton Classes="light">Primary light</ToggleButton>
+      </showMeTheXaml:XamlDisplay>
+
+      <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons5">
+        <ToggleButton Classes="dark">Primary dark</ToggleButton>
+      </showMeTheXaml:XamlDisplay>
+
+      <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons6">
+        <ToggleButton Classes="accent">Accent</ToggleButton>
+      </showMeTheXaml:XamlDisplay>
+    </WrapPanel>
+
+    <WrapPanel Orientation="Horizontal">
+      <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons7" VerticalAlignment="Center">
+        <ToggleButton Theme="{StaticResource MaterialOutlineToggleButton}">Outline</ToggleButton>
+      </showMeTheXaml:XamlDisplay>
+
+      <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons8" VerticalAlignment="Center">
+        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}">Flat</ToggleButton>
+      </showMeTheXaml:XamlDisplay>
+
+      <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons9">
+        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}">
+          <controls:MaterialInternalIcon Kind="Clock" />
+        </ToggleButton>
+      </showMeTheXaml:XamlDisplay>
+    </WrapPanel>
+  </StackPanel>
+</UserControl>
\ No newline at end of file
diff --git a/Material.Styles/Resources/Themes/ToggleButton.axaml b/Material.Styles/Resources/Themes/ToggleButton.axaml
index 56c8e9b0..57b20405 100644
--- a/Material.Styles/Resources/Themes/ToggleButton.axaml
+++ b/Material.Styles/Resources/Themes/ToggleButton.axaml
@@ -14,32 +14,9 @@
         <ToggleButton Classes="dark">Dark</ToggleButton>
 
         <ToggleButton IsEnabled="False">Disabled</ToggleButton>
-
-        <StackPanel Orientation="Horizontal">
-          <TextBlock VerticalAlignment="Center" Margin="0 0 8 0" Text="Icon:" />
-          <ToggleButton Classes="Icon">
-            <controls:MaterialInternalIcon Kind="Clock" />
-          </ToggleButton>
-        </StackPanel>
-
-        <StackPanel Orientation="Horizontal">
-          <TextBlock VerticalAlignment="Center" Margin="0 0 8 0" Text="Icon NoFeedback:" />
-          <ToggleButton Classes="Icon NoFeedback">
-            <controls:MaterialInternalIcon Kind="Clock" />
-          </ToggleButton>
-        </StackPanel>
       </StackPanel>
       <StackPanel Orientation="Horizontal" Spacing="8">
-        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}">Flat</ToggleButton>
-
-        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" Classes="accent">Accent</ToggleButton>
-        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" Classes="light">Light</ToggleButton>
-        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" Classes="dark">Dark</ToggleButton>
-
-        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" IsEnabled="False">Disabled</ToggleButton>
-      </StackPanel>
-      <StackPanel Orientation="Horizontal" Spacing="8">
-        <ToggleButton Theme="{StaticResource MaterialOutlineToggleButton}">Flat</ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialOutlineToggleButton}">Outline</ToggleButton>
 
         <ToggleButton Theme="{StaticResource MaterialOutlineToggleButton}" Classes="accent">Accent</ToggleButton>
         <ToggleButton Theme="{StaticResource MaterialOutlineToggleButton}" Classes="light">Light</ToggleButton>
@@ -48,13 +25,32 @@
         <ToggleButton Theme="{StaticResource MaterialOutlineToggleButton}" IsEnabled="False">Disabled</ToggleButton>
       </StackPanel>
       <StackPanel Orientation="Horizontal" Spacing="8">
-        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}">Flat</ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}">Flat</ToggleButton>
 
-        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" Classes="accent">Accent</ToggleButton>
-        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" Classes="light">Light</ToggleButton>
-        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" Classes="dark">Dark</ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" Classes="accent">Accent</ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" Classes="light">Light</ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" Classes="dark">Dark</ToggleButton>
 
-        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" IsEnabled="False">Disabled</ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" IsEnabled="False">Disabled</ToggleButton>
+      </StackPanel>
+      <StackPanel Orientation="Horizontal" Spacing="8">
+        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}">
+          <controls:MaterialInternalIcon Kind="Clock" />
+        </ToggleButton>
+
+        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" Classes="accent">
+          <controls:MaterialInternalIcon Kind="Clock" />
+        </ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" Classes="light">
+          <controls:MaterialInternalIcon Kind="Clock" />
+        </ToggleButton>
+        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" Classes="dark">
+          <controls:MaterialInternalIcon Kind="Clock" />
+        </ToggleButton>
+
+        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" IsEnabled="False">
+          <controls:MaterialInternalIcon Kind="Clock" />
+        </ToggleButton>
       </StackPanel>
     </StackPanel>
   </Design.PreviewWith>

From 4ba5ca63ccec1ba7583773a079098076ec894bcd Mon Sep 17 00:00:00 2001
From: SKProCH <skproch@yandex.ru>
Date: Sun, 28 Apr 2024 23:13:55 +0300
Subject: [PATCH 4/5] Add example of using Button's ControlTheme for
 ToggleButton

---
 Material.Avalonia.Demo/Pages/TogglesDemo.axaml | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/Material.Avalonia.Demo/Pages/TogglesDemo.axaml b/Material.Avalonia.Demo/Pages/TogglesDemo.axaml
index 29d02072..d6f3012b 100644
--- a/Material.Avalonia.Demo/Pages/TogglesDemo.axaml
+++ b/Material.Avalonia.Demo/Pages/TogglesDemo.axaml
@@ -235,5 +235,16 @@
         </ToggleButton>
       </showMeTheXaml:XamlDisplay>
     </WrapPanel>
+
+    <StackPanel>
+      <showMeTheXaml:XamlDisplay UniqueId="ToggleButtons10">
+        <ToggleButton Theme="{StaticResource MaterialFlatButton}">
+          <TextBlock>
+            <Run>Button's ControlThemes if you don't want pressed state: </Run>
+            <Run Text="{Binding $parent[ToggleButton].IsChecked}"></Run>
+          </TextBlock>
+        </ToggleButton>
+      </showMeTheXaml:XamlDisplay>
+    </StackPanel>
   </StackPanel>
 </UserControl>
\ No newline at end of file

From 3f4540cd7b411bbdc32bbc641d10c47b518761d0 Mon Sep 17 00:00:00 2001
From: SKProCH <skproch@yandex.ru>
Date: Sun, 28 Apr 2024 23:17:57 +0300
Subject: [PATCH 5/5] Change ToggleButton theme in other controls

---
 Material.Styles/Resources/Themes/ComboBox.axaml   | 2 +-
 Material.Styles/Resources/Themes/DatePicker.axaml | 5 ++---
 Material.Styles/Resources/Themes/TextBox.axaml    | 2 +-
 Material.Styles/Resources/Themes/TimePicker.axaml | 5 ++---
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/Material.Styles/Resources/Themes/ComboBox.axaml b/Material.Styles/Resources/Themes/ComboBox.axaml
index e19d2e74..87cfcca6 100644
--- a/Material.Styles/Resources/Themes/ComboBox.axaml
+++ b/Material.Styles/Resources/Themes/ComboBox.axaml
@@ -165,7 +165,7 @@
     <Setter Property="Template">
       <ControlTemplate>
         <StackPanel Name="PART_TemplateRoot">
-          <ToggleButton Classes="NoFeedback TransparentBack"
+          <ToggleButton Classes="no-ripple"
                         MinHeight="48" BorderThickness="0"
                         HorizontalContentAlignment="Stretch"
                         IsChecked="{TemplateBinding IsDropDownOpen, Mode=TwoWay}"
diff --git a/Material.Styles/Resources/Themes/DatePicker.axaml b/Material.Styles/Resources/Themes/DatePicker.axaml
index f0bdf089..532f66ea 100644
--- a/Material.Styles/Resources/Themes/DatePicker.axaml
+++ b/Material.Styles/Resources/Themes/DatePicker.axaml
@@ -42,9 +42,8 @@
             </TextBox.Text>
             <TextBox.InnerRightContent>
               <ToggleButton Name="CalendarButton"
-                            Classes="Icon"
-                            Width="36"
-                            Height="36"
+                            Theme="{StaticResource MaterialFlatToggleButton}"
+                            Width="36" Height="36"
                             Margin="8 8 8 6">
                 <controls:MaterialInternalIcon Kind="Calendar"
                                                Width="20"
diff --git a/Material.Styles/Resources/Themes/TextBox.axaml b/Material.Styles/Resources/Themes/TextBox.axaml
index 8f4eaab9..809662a9 100644
--- a/Material.Styles/Resources/Themes/TextBox.axaml
+++ b/Material.Styles/Resources/Themes/TextBox.axaml
@@ -121,7 +121,7 @@
   </ControlTheme>
 
   <ControlTheme x:Key="RevealTextMaskToggleButtonTheme"
-                BasedOn="{StaticResource MaterialFlatToggleButton}"
+                BasedOn="{StaticResource MaterialFlatButton}"
                 TargetType="ToggleButton">
     <Setter Property="Height" Value="32" />
     <Setter Property="Width" Value="32" />
diff --git a/Material.Styles/Resources/Themes/TimePicker.axaml b/Material.Styles/Resources/Themes/TimePicker.axaml
index 3c25b78c..159d82e8 100644
--- a/Material.Styles/Resources/Themes/TimePicker.axaml
+++ b/Material.Styles/Resources/Themes/TimePicker.axaml
@@ -33,9 +33,8 @@
             </TextBox.Text>
             <TextBox.InnerRightContent>
               <ToggleButton Name="PART_TimePickerPopupButton"
-                            Classes="Icon"
-                            Width="36"
-                            Height="36"
+                            Theme="{StaticResource MaterialFlatToggleButton}"
+                            Width="36" Height="36"
                             Margin="8 8 8 6">
                 <controls:MaterialInternalIcon Kind="Clock"
                                                Width="20"