feat(Theming): add semantic colors

build/MigrateBrushes.ps1

@@ -29,6 +29,8 @@ foreach ($file in $files) {
     $fileContents = $fileContents -replace "\{StaticResource\ MaterialDesignCheckBoxDisabled}", "{StaticResource MaterialDesign.Brush.CheckBox.Disabled}"
     $fileContents = $fileContents -replace "\{StaticResource\ MaterialDesignChipBackground}", "{StaticResource MaterialDesign.Brush.Chip.Background}"
     $fileContents = $fileContents -replace "\{StaticResource\ MaterialDesignDataGridRowHoverBackground}", "{StaticResource MaterialDesign.Brush.DataGrid.RowHoverBackground}"
+    $fileContents = $fileContents -replace "\{StaticResource\ MaterialDesign\.Brush\.ValidationError}", "{StaticResource MaterialDesign.Brush.Error}"
+    $fileContents = $fileContents -replace "\{StaticResource\ MaterialDesignValidationErrorBrush}", "{StaticResource MaterialDesign.Brush.Error}"
     $fileContents = $fileContents -replace "\{StaticResource\ MaterialDesignBody}", "{StaticResource MaterialDesign.Brush.Foreground}"
     $fileContents = $fileContents -replace "\{StaticResource\ MaterialDesignBodyLight}", "{StaticResource MaterialDesign.Brush.ForegroundLight}"
     $fileContents = $fileContents -replace "\{StaticResource\ MaterialDesignCheckBoxOff}", "{StaticResource MaterialDesign.Brush.ForegroundLight}"
@@ -46,7 +48,6 @@ foreach ($file in $files) {
     $fileContents = $fileContents -replace "\{StaticResource\ MaterialDesignToolBackground}", "{StaticResource MaterialDesign.Brush.ToolBar.Item.Background}"
     $fileContents = $fileContents -replace "\{StaticResource\ MaterialDesignToolForeground}", "{StaticResource MaterialDesign.Brush.ToolBar.Item.Foreground}"
     $fileContents = $fileContents -replace "\{StaticResource\ MaterialDesignToolTipBackground}", "{StaticResource MaterialDesign.Brush.ToolTip.Background}"
-    $fileContents = $fileContents -replace "\{StaticResource\ MaterialDesignValidationErrorBrush}", "{StaticResource MaterialDesign.Brush.ValidationError}"
     if ($fileContents.Length -ne $fileLength) {
         Set-Content -Path $file -Value $fileContents -Encoding utf8BOM -NoNewline
     }

src/MainDemo.Wpf/Buttons.xaml

@@ -2,10 +2,11 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:sharedDomain="clr-namespace:MaterialDesignDemo.Shared.Domain;assembly=MaterialDesignDemo.Shared"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:materialDesignConverters="clr-namespace:MaterialDesignThemes.Wpf.Converters;assembly=MaterialDesignThemes.Wpf"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:sharedDomain="clr-namespace:MaterialDesignDemo.Shared.Domain;assembly=MaterialDesignDemo.Shared"
+             xmlns:sharedButtons="clr-namespace:MaterialDesignDemo.Shared.Examples.Buttons;assembly=MaterialDesignDemo.Shared"
              xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
              xmlns:system="clr-namespace:System;assembly=mscorlib"
              d:DataContext="{d:DesignInstance sharedDomain:ButtonsViewModel}"
@@ -498,6 +499,10 @@
 
     <Rectangle Style="{StaticResource PageSectionSeparator}" />
 
+    <sharedButtons:SemanticColoredButtonsExample/>
+
+    <Rectangle Style="{StaticResource PageSectionSeparator}" />
+
     <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Corner Radius" />
 
     <StackPanel Orientation="Horizontal">
@@ -969,7 +974,6 @@
         <smtx:XamlDisplay UniqueKey="split_button_3">
           <materialDesign:SplitButton VerticalAlignment="Bottom"
                                       Content="Split Button"
-
                                       Style="{StaticResource MaterialDesignRaisedDarkSplitButton}">
             <materialDesign:SplitButton.PopupContent>
               <ContentControl ContentTemplate="{StaticResource PopupContent}" />

src/MainDemo.Wpf/ColorTool.xaml

@@ -4,6 +4,7 @@
              xmlns:converters="clr-namespace:MaterialDesignDemo.Shared.Converters;assembly=MaterialDesignDemo.Shared"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:sharedDomain="clr-namespace:MaterialDesignDemo.Shared.Domain;assembly=MaterialDesignDemo.Shared"
+             xmlns:sharedColorTools="clr-namespace:MaterialDesignDemo.Shared.Examples.ColorTools;assembly=MaterialDesignDemo.Shared"
              xmlns:local="clr-namespace:MaterialDesignDemo"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:materialDesignColors="clr-namespace:MaterialDesignColors;assembly=MaterialDesignColors"
@@ -124,6 +125,11 @@
     <local:ThemeSettings Margin="0,0,0,8" DockPanel.Dock="Top" />
 
     <DockPanel>
+
+      <sharedColorTools:SemanticColorsExamples DockPanel.Dock="Bottom"/>
+
+      <Rectangle DockPanel.Dock="Bottom" Style="{StaticResource PageSectionSeparator}" />
+
       <!-- Selection controls -->
       <Border DockPanel.Dock="Bottom">
         <Grid>

src/MaterialDesign3.Demo.Wpf/Buttons.xaml

@@ -3,6 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:sharedDomain="clr-namespace:MaterialDesignDemo.Shared.Domain;assembly=MaterialDesignDemo.Shared"
+             xmlns:sharedButtons="clr-namespace:MaterialDesignDemo.Shared.Examples.Buttons;assembly=MaterialDesignDemo.Shared"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:materialDesignConverters="clr-namespace:MaterialDesignThemes.Wpf.Converters;assembly=MaterialDesignThemes.Wpf"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -511,6 +512,9 @@
             </Button>
           </smtx:XamlDisplay>
         </StackPanel>
+
+        <Rectangle Style="{StaticResource PageSectionSeparator}" />
+        <sharedButtons:SemanticColoredButtonsExample/>
       </StackPanel>
 
     </StackPanel>

src/MaterialDesign3.Demo.Wpf/ColorTool.xaml

@@ -4,6 +4,7 @@
              xmlns:converters="clr-namespace:MaterialDesignDemo.Shared.Converters;assembly=MaterialDesignDemo.Shared"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:sharedDomain="clr-namespace:MaterialDesignDemo.Shared.Domain;assembly=MaterialDesignDemo.Shared"
+             xmlns:sharedColorTools="clr-namespace:MaterialDesignDemo.Shared.Examples.ColorTools;assembly=MaterialDesignDemo.Shared"
              xmlns:local="clr-namespace:MaterialDesign3Demo"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:materialDesignColors="clr-namespace:MaterialDesignColors;assembly=MaterialDesignColors"
@@ -121,6 +122,11 @@
     <local:ThemeSettings Margin="8" DockPanel.Dock="Top" />
 
     <DockPanel>
+
+      <sharedColorTools:SemanticColorsExamples DockPanel.Dock="Bottom"/>
+
+      <Rectangle DockPanel.Dock="Bottom" Style="{StaticResource PageSectionSeparator}" />
+
       <!-- Selection controls -->
       <Border DockPanel.Dock="Bottom">
         <Grid>

src/MaterialDesignDemo.Shared/Examples/Buttons/SemanticColoredButtonsExample.xaml

@@ -0,0 +1,48 @@
+<UserControl x:Class="MaterialDesignDemo.Shared.Examples.Buttons.SemanticColoredButtonsExample"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="clr-namespace:MaterialDesignDemo.Shared.Examples.Buttons"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
+             d:DesignHeight="450"
+             d:DesignWidth="800"
+             mc:Ignorable="d">
+  <materialDesign:Card Padding="16">
+    <StackPanel>
+      <TextBlock Margin="0,0,0,8"
+                 Style="{StaticResource MaterialDesignHeadline6TextBlock}"
+                 Text="Semantic colored buttons" />
+
+      <WrapPanel Margin="0,0,0,8">
+        <StackPanel Orientation="Horizontal">
+          <smtx:XamlDisplay Margin="0,0,16,0" UniqueKey="SemanticColoredButtonsExample_Error">
+            <Button Background="{DynamicResource MaterialDesign.Brush.Error}"
+                    BorderBrush="{DynamicResource MaterialDesign.Brush.Error}"
+                    Content="Error"
+                    IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" />
+          </smtx:XamlDisplay>
+          <smtx:XamlDisplay Margin="0,0,16,0" UniqueKey="SemanticColoredButtonsExample_Warning">
+            <Button Background="{DynamicResource MaterialDesign.Brush.Warning}"
+                    BorderBrush="{DynamicResource MaterialDesign.Brush.Warning}"
+                    Content="Warning"
+                    IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" />
+          </smtx:XamlDisplay>
+          <smtx:XamlDisplay Margin="0,0,16,0" UniqueKey="SemanticColoredButtonsExample_Success">
+            <Button Background="{DynamicResource MaterialDesign.Brush.Success}"
+                    BorderBrush="{DynamicResource MaterialDesign.Brush.Success}"
+                    Content="Success"
+                    IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" />
+          </smtx:XamlDisplay>
+          <smtx:XamlDisplay Margin="0,0,16,0" UniqueKey="SemanticColoredButtonsExample_Info">
+            <Button Background="{DynamicResource MaterialDesign.Brush.Info}"
+                    BorderBrush="{DynamicResource MaterialDesign.Brush.Info}"
+                    Content="Info"
+                    IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" />
+          </smtx:XamlDisplay>
+        </StackPanel>
+      </WrapPanel>
+    </StackPanel>
+  </materialDesign:Card>
+</UserControl>

src/MaterialDesignDemo.Shared/Examples/Buttons/SemanticColoredButtonsExample.xaml.cs

@@ -0,0 +1,9 @@
+namespace MaterialDesignDemo.Shared.Examples.Buttons;
+
+public partial class SemanticColoredButtonsExample : UserControl
+{
+    public SemanticColoredButtonsExample()
+    {
+        InitializeComponent();
+    }
+}

src/MaterialDesignDemo.Shared/Examples/ColorTools/SemanticColorsExamples.xaml

@@ -0,0 +1,201 @@
+<UserControl x:Class="MaterialDesignDemo.Shared.Examples.ColorTools.SemanticColorsExamples"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:local="clr-namespace:MaterialDesignDemo.Shared.Examples.ColorTools"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
+             d:DesignHeight="450"
+             d:DesignWidth="800"
+             mc:Ignorable="d">
+  <materialDesign:Card Padding="16">
+    <StackPanel>
+      <TextBlock Margin="0,0,0,8"
+                 Style="{StaticResource MaterialDesignHeadline6TextBlock}"
+                 Text="Semantic, theme-aware colors" />
+      <Grid>
+        <Grid.ColumnDefinitions>
+          <ColumnDefinition Width="90" />
+          <ColumnDefinition Width="120" />
+          <ColumnDefinition Width="Auto" />
+          <ColumnDefinition Width="Auto" />
+        </Grid.ColumnDefinitions>
+
+        <Grid.RowDefinitions>
+          <RowDefinition Height="Auto" />
+          <RowDefinition Height="Auto" />
+          <RowDefinition Height="Auto" />
+          <RowDefinition Height="Auto" />
+          <RowDefinition Height="Auto" />
+          <RowDefinition Height="Auto" />
+          <RowDefinition Height="Auto" />
+          <RowDefinition Height="Auto" />
+          <RowDefinition Height="Auto" />
+          <RowDefinition Height="Auto" />
+          <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <!-- Header -->
+        <TextBlock Grid.Row="0"
+                   Grid.Column="0"
+                   Margin="8"
+                   FontWeight="SemiBold"
+                   Text="Preview" />
+
+        <TextBlock Grid.Row="0"
+                   Grid.Column="1"
+                   Margin="8"
+                   FontWeight="SemiBold"
+                   Text="Name" />
+
+        <TextBlock Grid.Row="0"
+                   Grid.Column="2"
+                   Margin="8"
+                   FontWeight="SemiBold"
+                   Text="Resource key" />
+
+        <Separator Grid.Row="1" Grid.ColumnSpan="4" />
+
+        <!-- Error -->
+        <smtx:XamlDisplay Grid.Row="2"
+                          Grid.Column="0"
+                          UniqueKey="SemanticColorsExamples_Error">
+          <Border Width="48"
+                  Height="24"
+                  Margin="8"
+                  Background="{DynamicResource MaterialDesign.Brush.Error}"
+                  CornerRadius="4" />
+        </smtx:XamlDisplay>
+
+        <TextBlock Grid.Row="2"
+                   Grid.Column="1"
+                   Margin="8"
+                   VerticalAlignment="Center"
+                   Text="Error" />
+
+        <TextBlock Grid.Row="2"
+                   Grid.Column="2"
+                   Margin="8"
+                   VerticalAlignment="Center"
+                   Text="MaterialDesign.Brush.Error" />
+
+        <Button Grid.Row="2"
+                Grid.Column="3"
+                Margin="8,4"
+                Padding="12,4"
+                VerticalAlignment="Center"
+                Command="{Binding CopyResourceCommand}"
+                CommandParameter="MaterialDesign.Brush.Error"
+                Content="{materialDesign:PackIcon Kind=ContentCopy}"
+                Style="{StaticResource MaterialDesignIconForegroundButton}" />
+
+        <Separator Grid.Row="3" Grid.ColumnSpan="4" />
+
+        <!-- Warning -->
+        <smtx:XamlDisplay Grid.Row="4"
+                          Grid.Column="0"
+                          UniqueKey="SemanticColorsExamples_Warning">
+          <Border Width="48"
+                  Height="24"
+                  Margin="8"
+                  Background="{DynamicResource MaterialDesign.Brush.Warning}"
+                  CornerRadius="4" />
+        </smtx:XamlDisplay>
+
+        <TextBlock Grid.Row="4"
+                   Grid.Column="1"
+                   Margin="8"
+                   VerticalAlignment="Center"
+                   Text="Warning" />
+
+        <TextBlock Grid.Row="4"
+                   Grid.Column="2"
+                   Margin="8"
+                   VerticalAlignment="Center"
+                   Text="MaterialDesign.Brush.Warning" />
+
+        <Button Grid.Row="4"
+                Grid.Column="3"
+                Margin="8,4"
+                Padding="12,4"
+                VerticalAlignment="Center"
+                Command="{Binding CopyResourceCommand}"
+                CommandParameter="MaterialDesign.Brush.Warning"
+                Content="{materialDesign:PackIcon Kind=ContentCopy}"
+                Style="{StaticResource MaterialDesignIconForegroundButton}" />
+
+        <Separator Grid.Row="5" Grid.ColumnSpan="4" />
+
+        <!-- Success -->
+        <smtx:XamlDisplay Grid.Row="6"
+                          Grid.Column="0"
+                          UniqueKey="SemanticColorsExamples_Success">
+          <Border Width="48"
+                  Height="24"
+                  Margin="8"
+                  Background="{DynamicResource MaterialDesign.Brush.Success}"
+                  CornerRadius="4" />
+        </smtx:XamlDisplay>
+
+        <TextBlock Grid.Row="6"
+                   Grid.Column="1"
+                   Margin="8"
+                   VerticalAlignment="Center"
+                   Text="Success" />
+
+        <TextBlock Grid.Row="6"
+                   Grid.Column="2"
+                   Margin="8"
+                   VerticalAlignment="Center"
+                   Text="MaterialDesign.Brush.Success" />
+
+        <Button Grid.Row="6"
+                Grid.Column="3"
+                Margin="8,4"
+                Padding="12,4"
+                VerticalAlignment="Center"
+                Command="{Binding CopyResourceCommand}"
+                CommandParameter="MaterialDesign.Brush.Success"
+                Content="{materialDesign:PackIcon Kind=ContentCopy}"
+                Style="{StaticResource MaterialDesignIconForegroundButton}" />
+
+        <Separator Grid.Row="7" Grid.ColumnSpan="4" />
+
+        <!-- Info -->
+        <smtx:XamlDisplay Grid.Row="8"
+                          Grid.Column="0"
+                          UniqueKey="SemanticColorsExamples_Info">
+          <Border Width="48"
+                  Height="24"
+                  Margin="8"
+                  Background="{DynamicResource MaterialDesign.Brush.Info}"
+                  CornerRadius="4" />
+        </smtx:XamlDisplay>
+
+        <TextBlock Grid.Row="8"
+                   Grid.Column="1"
+                   Margin="8"
+                   VerticalAlignment="Center"
+                   Text="Info" />
+
+        <TextBlock Grid.Row="8"
+                   Grid.Column="2"
+                   Margin="8"
+                   VerticalAlignment="Center"
+                   Text="MaterialDesign.Brush.Info" />
+
+        <Button Grid.Row="8"
+                Grid.Column="3"
+                Margin="8,4"
+                Padding="12,4"
+                VerticalAlignment="Center"
+                Command="{Binding CopyResourceCommand}"
+                CommandParameter="MaterialDesign.Brush.Info"
+                Content="{materialDesign:PackIcon Kind=ContentCopy}"
+                Style="{StaticResource MaterialDesignIconForegroundButton}" />
+
+      </Grid>
+    </StackPanel>
+  </materialDesign:Card>
+</UserControl>

src/MaterialDesignDemo.Shared/Examples/ColorTools/SemanticColorsExamples.xaml.cs

@@ -0,0 +1,20 @@
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+
+namespace MaterialDesignDemo.Shared.Examples.ColorTools;
+
+public partial class SemanticColorsExamples : UserControl
+{
+    public SemanticColorsExamples()
+    {
+        DataContext = new SemanticColorsViewModel();
+        InitializeComponent();
+    }
+}
+
+public partial class SemanticColorsViewModel : ObservableObject
+{
+    [RelayCommand]
+    private void CopyResource(string resourceKey)
+        => System.Windows.Clipboard.SetText(resourceKey);
+}

src/MaterialDesignDemo.Shared/Examples/Dialogs/DialogHostWaitForExample.xaml

@@ -74,7 +74,7 @@
                 <TextBlock x:Name="Sample_CloseClicked" />
               </WrapPanel>
 
-              <materialDesign:Chip HorizontalAlignment="Right" Foreground="{DynamicResource MaterialDesign.Brush.ValidationError}">
+              <materialDesign:Chip HorizontalAlignment="Right" Foreground="{DynamicResource MaterialDesign.Brush.Error}">
                 <WrapPanel VerticalAlignment="Center">
                   <materialDesign:PackIcon Kind="ArrowLeftBottom" RenderTransformOrigin="0.5 0.5">
                     <materialDesign:PackIcon.RenderTransform>