From dca25f6d89a9a78fb8f19275e647d62b19251b27 Mon Sep 17 00:00:00 2001
From: Codex CLI <codex@example.com>
Date: Fri, 29 Aug 2025 01:34:20 -0500
Subject: [PATCH] theme: adopt dark palette and distinct pane backgrounds

- Implement official color tokens and theme brushes\n- Style variables pane (surface) vs. history (background)\n- Apply dark input/border tints; ensure text contrast\n- Style functions flyout surface and border
---
 src/AdvancedCalculator/Styles/Colors.axaml  | 56 +++++++++++----------
 src/AdvancedCalculator/Views/MainView.axaml | 13 ++---
 2 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/AdvancedCalculator/Styles/Colors.axaml b/src/AdvancedCalculator/Styles/Colors.axaml
index 3dd99b2..5bc5af4 100644
--- a/src/AdvancedCalculator/Styles/Colors.axaml
+++ b/src/AdvancedCalculator/Styles/Colors.axaml
@@ -1,10 +1,7 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Styles.Resources>
-    <!-- Base surface + foreground colors as Color resources to allow reuse -->
-    <Color x:Key="CSurface">#FFF0F4F7</Color>
-    <Color x:Key="CForeground">#FF0F1A21</Color>
-    <!-- Core palette -->
+    <!-- Official palette tokens -->
     <Color x:Key="CPrimary1">#FF5AC3D6</Color>
     <Color x:Key="CPrimary2">#FF223544</Color>
     <Color x:Key="CPrimary3">#FF4E6D84</Color>
@@ -12,7 +9,10 @@
     <Color x:Key="CEmph2">#FFD94E87</Color>
     <Color x:Key="CEmph3">#FF49C46D</Color>
 
-    <!-- Brushes from palette -->
+    <!-- Text & utilities on dark surfaces -->
+    <Color x:Key="CText">#FFEAF2F7</Color>
+
+    <!-- Core brushes -->
     <SolidColorBrush x:Key="Brush.Primary1" Color="{DynamicResource CPrimary1}"/>
     <SolidColorBrush x:Key="Brush.Primary2" Color="{DynamicResource CPrimary2}"/>
     <SolidColorBrush x:Key="Brush.Primary3" Color="{DynamicResource CPrimary3}"/>
@@ -20,21 +20,25 @@
     <SolidColorBrush x:Key="Brush.Emph2" Color="{DynamicResource CEmph2}"/>
     <SolidColorBrush x:Key="Brush.Emph3" Color="{DynamicResource CEmph3}"/>
 
-    <!-- Derived brushes for surfaces and text -->
-    <SolidColorBrush x:Key="Brush.Surface" Color="{DynamicResource CSurface}"/>
-    <SolidColorBrush x:Key="Brush.SurfaceAlt" Color="{DynamicResource CPrimary3}" Opacity="0.10"/>
-    <SolidColorBrush x:Key="Brush.Foreground" Color="{DynamicResource CForeground}"/>
-    <SolidColorBrush x:Key="Brush.ForegroundOnPrimary">#FFFFFFFF</SolidColorBrush>
+    <!-- Surfaces & text -->
+    <SolidColorBrush x:Key="Brush.Surface" Color="{DynamicResource CPrimary2}"/>
+    <SolidColorBrush x:Key="Brush.Background" Color="{DynamicResource CPrimary3}"/>
+    <SolidColorBrush x:Key="Brush.Foreground" Color="{DynamicResource CText}"/>
+    <SolidColorBrush x:Key="Brush.ForegroundOnPrimary">#FF223544</SolidColorBrush>
 
-    <!-- Utility tints -->
+    <!-- Overlays & borders (use opacity for #RRGGBBAA spec) -->
     <SolidColorBrush x:Key="Brush.AccentSoft" Color="{DynamicResource CPrimary1}" Opacity="0.16"/>
     <SolidColorBrush x:Key="Brush.AccentSofter" Color="{DynamicResource CPrimary1}" Opacity="0.10"/>
-    <SolidColorBrush x:Key="Brush.BorderSoft" Color="{DynamicResource CPrimary3}" Opacity="0.35"/>
+    <SolidColorBrush x:Key="Brush.Border" Color="#FFFFFFFF" Opacity="0.18"/>
+
+    <!-- Inputs on dark -->
+    <SolidColorBrush x:Key="Brush.InputBackground" Color="#FFFFFFFF" Opacity="0.06"/>
+    <SolidColorBrush x:Key="Brush.InputBorder" Color="#FFFFFFFF" Opacity="0.22"/>
 
     <!-- Accent + theme integration (FluentTheme consumes these) -->
     <SolidColorBrush x:Key="ThemeAccentBrush" Color="{DynamicResource CPrimary1}"/>
-    <SolidColorBrush x:Key="ThemeBackgroundBrush" Color="{DynamicResource CSurface}"/>
-    <SolidColorBrush x:Key="ThemeForegroundBrush" Color="{DynamicResource CForeground}"/>
+    <SolidColorBrush x:Key="ThemeBackgroundBrush" Color="{DynamicResource CPrimary3}"/>
+    <SolidColorBrush x:Key="ThemeForegroundBrush" Color="{DynamicResource CText}"/>
   </Styles.Resources>
 
   <!-- Window background -->
@@ -51,7 +55,7 @@
   <Style Selector="Button">
     <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}"/>
     <Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource Brush.Primary3}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource Brush.Border}"/>
   </Style>
   <Style Selector="Button:pointerover">
     <Setter Property="Background" Value="{DynamicResource Brush.Primary1}"/>
@@ -65,41 +69,41 @@
   <Style Selector="Button.success">
     <Setter Property="Background" Value="{DynamicResource Brush.Emph3}"/>
     <Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource Brush.Primary3}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource Brush.Border}"/>
   </Style>
   <Style Selector="Button.warning">
     <Setter Property="Background" Value="{DynamicResource Brush.Emph1}"/>
     <Setter Property="Foreground" Value="#FF222222"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource Brush.Primary3}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource Brush.Border}"/>
   </Style>
   <Style Selector="Button.danger">
     <Setter Property="Background" Value="{DynamicResource Brush.Emph2}"/>
     <Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource Brush.Primary3}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource Brush.Border}"/>
   </Style>
 
   <!-- ToggleButton aligned with Button -->
   <Style Selector="ToggleButton">
     <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}"/>
     <Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource Brush.Primary3}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource Brush.Border}"/>
   </Style>
   <Style Selector="ToggleButton:checked">
     <Setter Property="Background" Value="{DynamicResource Brush.Primary3}"/>
   </Style>
 
-  <!-- Simple card-like border using surface alt -->
+  <!-- Simple card-like border using surface overlay -->
   <Style Selector="Border.card">
-    <Setter Property="Background" Value="{DynamicResource Brush.SurfaceAlt}"/>
+    <Setter Property="Background" Value="{DynamicResource Brush.Surface}"/>
     <Setter Property="CornerRadius" Value="8"/>
     <Setter Property="Padding" Value="8"/>
   </Style>
 
-  <!-- Inputs -->
+  <!-- Inputs (dark) -->
   <Style Selector="TextBox">
-    <Setter Property="Background" Value="#FFFFFFFF"/>
+    <Setter Property="Background" Value="{DynamicResource Brush.InputBackground}"/>
     <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
-    <Setter Property="BorderBrush" Value="{DynamicResource Brush.BorderSoft}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource Brush.InputBorder}"/>
   </Style>
   <Style Selector="TextBox:focus">
     <Setter Property="BorderBrush" Value="{DynamicResource ThemeAccentBrush}"/>
@@ -118,7 +122,7 @@
     <Setter Property="BorderBrush" Value="{DynamicResource ThemeAccentBrush}"/>
   </Style>
   <Style Selector="ListBox">
-    <Setter Property="Background" Value="{DynamicResource Brush.Surface}"/>
+    <Setter Property="Background" Value="Transparent"/>
   </Style>
 
   <!-- Menus & flyouts -->
@@ -134,7 +138,7 @@
 
   <!-- Scrollbars -->
   <Style Selector="ScrollBar">
-    <Setter Property="Foreground" Value="{DynamicResource Brush.Primary3}"/>
+    <Setter Property="Foreground" Value="{DynamicResource Brush.Primary1}"/>
     <Setter Property="Background" Value="#00000000"/>
   </Style>
 </Styles>
diff --git a/src/AdvancedCalculator/Views/MainView.axaml b/src/AdvancedCalculator/Views/MainView.axaml
index 41507f3..e9b804d 100644
--- a/src/AdvancedCalculator/Views/MainView.axaml
+++ b/src/AdvancedCalculator/Views/MainView.axaml
@@ -26,7 +26,7 @@
 
 		<!-- Left pane: Variables only (Functions moved to flyout) -->
 		<SplitView.Pane>
-			<Grid>
+			<Grid Background="{DynamicResource Brush.Surface}">
 
 				<!-- Variables list with empty-state hint overlay -->
 				<Grid Grid.Row="0">
@@ -68,10 +68,10 @@
 		</SplitView.Pane>
 
 		<!-- Right content: History + Input -->
-		<SplitView.Content>
-			<Grid RowDefinitions="*,Auto">
-				<!-- History -->
-                <Grid Grid.Row="0">
+			<SplitView.Content>
+				<Grid RowDefinitions="*,Auto">
+					<!-- History -->
+                <Grid Grid.Row="0" Background="{DynamicResource ThemeBackgroundBrush}">
                     <ListBox x:Name="HistoryList" ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}"
                          AutomationProperties.Name="History list">
                         <ListBox.ItemTemplate>
@@ -139,7 +139,8 @@
                         Placement="BottomEdgeAlignedLeft"
                         Opened="OnFunctionsFlyoutOpened"
                         Closed="OnFunctionsFlyoutClosed">
-                    <Border x:Name="FunctionsPanelRoot" Padding="8" MinWidth="360" MaxHeight="420">
+                    <Border x:Name="FunctionsPanelRoot" Padding="8" MinWidth="360" MaxHeight="420"
+                            Background="{DynamicResource Brush.Surface}" BorderBrush="{DynamicResource Brush.Border}" BorderThickness="1" CornerRadius="6">
                         <ScrollViewer>
                             <StackPanel>
                                 <ItemsControl ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctionGroups}">