From 96beae3e23dfdead8e46a3eb24f468df9f80dc2f Mon Sep 17 00:00:00 2001
From: Jay <65828559+Jay-o-Way@users.noreply.github.com>
Date: Fri, 6 Dec 2024 15:39:54 +0100
Subject: [PATCH] small changes to Color pages (#1670)

## Description
Changed one "control" to "card", make every Description end with a
period.

## Motivation and Context
just tweaking

## How Has This Been Tested?
With Visual Studio :)

## Screenshots (if appropriate):

![image](https://github.com/user-attachments/assets/5ccf2c13-dd4a-4c83-a4a5-060cad1b92f8)

## Types of changes
- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

---------

Co-authored-by: Niels Laute <niels.laute@live.nl>
---
 .../DesignGuidance/ColorPageExample.xaml      | 50 ++++++++-----------
 .../ColorSections/BackgroundSection.xaml      | 10 ++--
 .../ColorSections/HighContrastSection.xaml    | 16 +++---
 .../ColorSections/StrokeSection.xaml          |  6 +--
 4 files changed, 36 insertions(+), 46 deletions(-)

diff --git a/WinUIGallery/Controls/DesignGuidance/ColorPageExample.xaml b/WinUIGallery/Controls/DesignGuidance/ColorPageExample.xaml
index 88adedc48..488bdbbcf 100644
--- a/WinUIGallery/Controls/DesignGuidance/ColorPageExample.xaml
+++ b/WinUIGallery/Controls/DesignGuidance/ColorPageExample.xaml
@@ -10,41 +10,31 @@
     Background="{ThemeResource GalleryBackgroundBrush}"
     mc:Ignorable="d">
 
-    <Grid>
+    <Grid
+        Margin="0,24,0,12"
+        Padding="12"
+        Background="{x:Bind Background, Mode=OneWay}"
+        BorderBrush="{ThemeResource GalleryBorderBrush}"
+        BorderThickness="1"
+        CornerRadius="{StaticResource OverlayCornerRadius}"
+        RowSpacing="12">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <Grid
+        <TextBlock
+            Foreground="{x:Bind Foreground, Mode=OneWay}"
+            Style="{ThemeResource SubtitleTextBlockStyle}"
+            Text="{x:Bind Title, Mode=OneWay}" />
+        <TextBlock
             Grid.Row="1"
-            Margin="0,24,0,0"
-            Padding="12"
-            Background="{x:Bind Background, Mode=OneWay}"
-            BorderBrush="{ThemeResource GalleryBorderBrush}"
-            BorderThickness="1"
-            CornerRadius="{StaticResource OverlayCornerRadius}">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="*" />
-            </Grid.RowDefinitions>
-
-            <TextBlock
-                Margin="0,0,0,12"
-                Foreground="{x:Bind Foreground, Mode=OneWay}"
-                Style="{ThemeResource SubtitleTextBlockStyle}"
-                Text="{x:Bind Title, Mode=OneWay}" />
-
-            <TextBlock
-                Grid.Row="1"
-                Style="{ThemeResource CaptionTextBlockStyle}"
-                Text="{x:Bind Description, Mode=OneWay}" />
-            <ContentPresenter
-                Grid.Row="2"
-                Margin="0,12,0,12"
-                HorizontalAlignment="Center"
-                Content="{x:Bind ExampleContent, Mode=OneWay}" />
-        </Grid>
+            Style="{ThemeResource CaptionTextBlockStyle}"
+            Text="{x:Bind Description, Mode=OneWay}" />
+        <ContentPresenter
+            Grid.Row="2"
+            HorizontalAlignment="Center"
+            Content="{x:Bind ExampleContent, Mode=OneWay}" />
     </Grid>
 </UserControl>
diff --git a/WinUIGallery/Controls/DesignGuidance/ColorSections/BackgroundSection.xaml b/WinUIGallery/Controls/DesignGuidance/ColorSections/BackgroundSection.xaml
index 0c289e8bc..b4d8618be 100644
--- a/WinUIGallery/Controls/DesignGuidance/ColorSections/BackgroundSection.xaml
+++ b/WinUIGallery/Controls/DesignGuidance/ColorSections/BackgroundSection.xaml
@@ -17,14 +17,14 @@
         <designguidance:ColorPageExample
             Title="Card Background"
             Background="{ThemeResource SolidBackgroundFillColorQuarternaryBrush}"
-            Description="Used to create 'cards' - content blocks that live on page and layer backgrounds">
+            Description="Used to create 'cards' - content blocks that live on page and layer backgrounds.">
             <Border
                 Width="60"
                 Height="30"
                 Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                 BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                 BorderThickness="1"
-                CornerRadius="4" />
+                CornerRadius="{StaticResource ControlCornerRadius}" />
         </designguidance:ColorPageExample>
         <Grid Style="{StaticResource GalleryTileGridStyle}">
             <Grid.ColumnDefinitions>
@@ -77,7 +77,7 @@
             <designguidance:ColorTile
                 Background="{ThemeResource SmokeFillColorDefaultBrush}"
                 ColorBrushName="SmokeFillColorDefaultBrush"
-                ColorExplanation="Dims backgrounds behind dialogs"
+                ColorExplanation="Dims the background behind dialogs"
                 ColorName="Smoke / Default"
                 ColorValue="#000000 (4D, 30%) " />
         </Grid>
@@ -88,7 +88,7 @@
         <designguidance:ColorPageExample
             Title="Layer"
             Background="{ThemeResource SolidBackgroundFillColorQuarternaryBrush}"
-            Description="Used on background colors of any material to create layering">
+            Description="Used on background colors of any material to create layering.">
             <Grid
                 Width="120"
                 Height="40"
@@ -232,7 +232,7 @@
                 Background="{ThemeResource GalleryBackgroundBrush}"
                 BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                 BorderThickness="1"
-                CornerRadius="4" />
+                CornerRadius="{StaticResource ControlCornerRadius}" />
         </designguidance:ColorPageExample>
 
         <Grid Style="{StaticResource GalleryTileGridStyle}">
diff --git a/WinUIGallery/Controls/DesignGuidance/ColorSections/HighContrastSection.xaml b/WinUIGallery/Controls/DesignGuidance/ColorSections/HighContrastSection.xaml
index 4864579a5..2eb9b9cb9 100644
--- a/WinUIGallery/Controls/DesignGuidance/ColorSections/HighContrastSection.xaml
+++ b/WinUIGallery/Controls/DesignGuidance/ColorSections/HighContrastSection.xaml
@@ -51,7 +51,7 @@
                 Grid.Column="1"
                 Background="#263B50"
                 ColorBrushName="SystemColorHighlightTextColor"
-                ColorExplanation="Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress."
+                ColorExplanation="Foreground color for text or UI that is selected, interacted with (hover, pressed), or in progress."
                 ColorName="Highlight Text Color"
                 ColorValue="#263B50"
                 Foreground="#8EE3F0"
@@ -61,7 +61,7 @@
                 Grid.Column="1"
                 Background="#8EE3F0"
                 ColorBrushName="SystemColorHighlightColor"
-                ColorExplanation="Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress."
+                ColorExplanation="Background or accent color for UI that is selected, interacted with (hover, pressed), or in progress."
                 ColorName="Highlight Color"
                 ColorValue="#8EE3F0"
                 Foreground="#263B50"
@@ -146,7 +146,7 @@
                 Grid.Column="1"
                 Background="#FFF5E3"
                 ColorBrushName="SystemColorHighlightTextColor"
-                ColorExplanation="Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress."
+                ColorExplanation="Foreground color for text or UI that is selected, interacted with (hover, pressed), or in progress."
                 ColorName="Highlight Text Color"
                 ColorValue="#FFF5E3"
                 Foreground="#903909"
@@ -156,7 +156,7 @@
                 Grid.Column="1"
                 Background="#903909"
                 ColorBrushName="SystemColorHighlightColor"
-                ColorExplanation="Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress."
+                ColorExplanation="Background or accent color for UI that is selected, interacted with (hover, pressed), or in progress."
                 ColorName="Highlight Color"
                 ColorValue="#903909"
                 Foreground="#FFF5E3"
@@ -241,7 +241,7 @@
                 Grid.Column="1"
                 Background="#212D3B"
                 ColorBrushName="SystemColorHighlightTextColor"
-                ColorExplanation="Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress."
+                ColorExplanation="Foreground color for text or UI that is selected, interacted with (hover, pressed), or in progress."
                 ColorName="Highlight Text Color"
                 ColorValue="#212D3B"
                 Foreground="#ABCFF2"
@@ -251,7 +251,7 @@
                 Grid.Column="1"
                 Background="#ABCFF2"
                 ColorBrushName="SystemColorHighlightColor"
-                ColorExplanation="Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress."
+                ColorExplanation="Background or accent color for UI that is selected, interacted with (hover, pressed), or in progress."
                 ColorName="Highlight Color"
                 ColorValue="#ABCFF2"
                 Foreground="#212D3B"
@@ -336,7 +336,7 @@
                 Grid.Column="1"
                 Background="#2B2B2B"
                 ColorBrushName="SystemColorHighlightTextColor"
-                ColorExplanation="Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress."
+                ColorExplanation="Foreground color for text or UI that is selected, interacted with (hover, pressed), or in progress."
                 ColorName="Highlight Text Color"
                 ColorValue="#2B2B2B"
                 Foreground="#D6B4FD"
@@ -346,7 +346,7 @@
                 Grid.Column="1"
                 Background="#D6B4FD"
                 ColorBrushName="SystemColorHighlightColor"
-                ColorExplanation="Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress."
+                ColorExplanation="Background or accent color for UI that is selected, interacted with (hover, pressed), or in progress."
                 ColorName="Highlight Color"
                 ColorValue="#D6B4FD"
                 Foreground="#2B2B2B"
diff --git a/WinUIGallery/Controls/DesignGuidance/ColorSections/StrokeSection.xaml b/WinUIGallery/Controls/DesignGuidance/ColorSections/StrokeSection.xaml
index 506e14532..e1f7727a6 100644
--- a/WinUIGallery/Controls/DesignGuidance/ColorSections/StrokeSection.xaml
+++ b/WinUIGallery/Controls/DesignGuidance/ColorSections/StrokeSection.xaml
@@ -33,7 +33,7 @@
                 Background="{ThemeResource CardStrokeColorDefaultBrush}"
                 ColorBrushName="CardStrokeColorDefaultBrush"
                 ColorExplanation="Card layer and strokes"
-                ColorName="Control Stroke / Default"
+                ColorName="Card Stroke / Default"
                 ColorValue="#000000 (0F, 6.78%)" />
             <designguidance:ColorTile
                 Grid.Column="1"
@@ -252,7 +252,7 @@
         <designguidance:ColorPageExample
             Title="Divider Stroke"
             Background="{ThemeResource SolidBackgroundFillColorQuarternaryBrush}"
-            Description="Used for divider and graphic lines. Theme inverse; dark in light theme and light in dark theme.">
+            Description="Used for divider and graphic lines.">
             <Grid
                 Width="120"
                 Height="40"
@@ -288,7 +288,7 @@
         <designguidance:ColorPageExample
             Title="Focus Stroke"
             Background="{ThemeResource SolidBackgroundFillColorQuarternaryBrush}"
-            Description="Used for divider and graphic lines. Theme inverse; dark in light theme and light in dark theme..">
+            Description="Used for divider and graphic lines. Theme inverse; dark in light theme and light in dark theme.">
             <Grid
                 BorderBrush="{ThemeResource FocusStrokeColorOuterBrush}"
                 BorderThickness="2"