wagesj45/advanced-calculator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theme: adopt dark palette and distinct pane backgrounds

Browse source 
- 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
This commit is contained in:
Codex CLI 2025-08-29 01:34:20 -05:00
commit dca25f6d89
2 changed files with 37 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/AdvancedCalculator/Styles/Colors.axaml
View file

@ -1,10 +1,7 @@
<Styles xmlns="https://github.com/avaloniaui" <Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Styles.Resources> <Styles.Resources>
<!-- Base surface + foreground colors as Color resources to allow reuse --> <!-- Official palette tokens -->
<Color x:Key="CSurface">#FFF0F4F7</Color>
<Color x:Key="CForeground">#FF0F1A21</Color>
<!-- Core palette -->
<Color x:Key="CPrimary1">#FF5AC3D6</Color> <Color x:Key="CPrimary1">#FF5AC3D6</Color>
<Color x:Key="CPrimary2">#FF223544</Color> <Color x:Key="CPrimary2">#FF223544</Color>
<Color x:Key="CPrimary3">#FF4E6D84</Color> <Color x:Key="CPrimary3">#FF4E6D84</Color>
@ -12,7 +9,10 @@
<Color x:Key="CEmph2">#FFD94E87</Color> <Color x:Key="CEmph2">#FFD94E87</Color>
<Color x:Key="CEmph3">#FF49C46D</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.Primary1" Color="{DynamicResource CPrimary1}"/>
<SolidColorBrush x:Key="Brush.Primary2" Color="{DynamicResource CPrimary2}"/> <SolidColorBrush x:Key="Brush.Primary2" Color="{DynamicResource CPrimary2}"/>
<SolidColorBrush x:Key="Brush.Primary3" Color="{DynamicResource CPrimary3}"/> <SolidColorBrush x:Key="Brush.Primary3" Color="{DynamicResource CPrimary3}"/>
@ -20,21 +20,25 @@
<SolidColorBrush x:Key="Brush.Emph2" Color="{DynamicResource CEmph2}"/> <SolidColorBrush x:Key="Brush.Emph2" Color="{DynamicResource CEmph2}"/>
<SolidColorBrush x:Key="Brush.Emph3" Color="{DynamicResource CEmph3}"/> <SolidColorBrush x:Key="Brush.Emph3" Color="{DynamicResource CEmph3}"/>
<!-- Derived brushes for surfaces and text --> <!-- Surfaces & text -->
<SolidColorBrush x:Key="Brush.Surface" Color="{DynamicResource CSurface}"/> <SolidColorBrush x:Key="Brush.Surface" Color="{DynamicResource CPrimary2}"/>
<SolidColorBrush x:Key="Brush.SurfaceAlt" Color="{DynamicResource CPrimary3}" Opacity="0.10"/> <SolidColorBrush x:Key="Brush.Background" Color="{DynamicResource CPrimary3}"/>
<SolidColorBrush x:Key="Brush.Foreground" Color="{DynamicResource CForeground}"/> <SolidColorBrush x:Key="Brush.Foreground" Color="{DynamicResource CText}"/>
<SolidColorBrush x:Key="Brush.ForegroundOnPrimary">#FFFFFFFF</SolidColorBrush> <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.AccentSoft" Color="{DynamicResource CPrimary1}" Opacity="0.16"/>
<SolidColorBrush x:Key="Brush.AccentSofter" Color="{DynamicResource CPrimary1}" Opacity="0.10"/> <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) --> <!-- Accent + theme integration (FluentTheme consumes these) -->
<SolidColorBrush x:Key="ThemeAccentBrush" Color="{DynamicResource CPrimary1}"/> <SolidColorBrush x:Key="ThemeAccentBrush" Color="{DynamicResource CPrimary1}"/>
<SolidColorBrush x:Key="ThemeBackgroundBrush" Color="{DynamicResource CSurface}"/> <SolidColorBrush x:Key="ThemeBackgroundBrush" Color="{DynamicResource CPrimary3}"/>
<SolidColorBrush x:Key="ThemeForegroundBrush" Color="{DynamicResource CForeground}"/> <SolidColorBrush x:Key="ThemeForegroundBrush" Color="{DynamicResource CText}"/>
</Styles.Resources> </Styles.Resources>
<!-- Window background --> <!-- Window background -->
@ -51,7 +55,7 @@
<Style Selector="Button"> <Style Selector="Button">
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}"/> <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/> <Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/>
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Primary3}"/> <Setter Property="BorderBrush" Value="{DynamicResource Brush.Border}"/>
</Style> </Style>
<Style Selector="Button:pointerover"> <Style Selector="Button:pointerover">
<Setter Property="Background" Value="{DynamicResource Brush.Primary1}"/> <Setter Property="Background" Value="{DynamicResource Brush.Primary1}"/>
@ -65,41 +69,41 @@
<Style Selector="Button.success"> <Style Selector="Button.success">
<Setter Property="Background" Value="{DynamicResource Brush.Emph3}"/> <Setter Property="Background" Value="{DynamicResource Brush.Emph3}"/>
<Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/> <Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/>
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Primary3}"/> <Setter Property="BorderBrush" Value="{DynamicResource Brush.Border}"/>
</Style> </Style>
<Style Selector="Button.warning"> <Style Selector="Button.warning">
<Setter Property="Background" Value="{DynamicResource Brush.Emph1}"/> <Setter Property="Background" Value="{DynamicResource Brush.Emph1}"/>
<Setter Property="Foreground" Value="#FF222222"/> <Setter Property="Foreground" Value="#FF222222"/>
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Primary3}"/> <Setter Property="BorderBrush" Value="{DynamicResource Brush.Border}"/>
</Style> </Style>
<Style Selector="Button.danger"> <Style Selector="Button.danger">
<Setter Property="Background" Value="{DynamicResource Brush.Emph2}"/> <Setter Property="Background" Value="{DynamicResource Brush.Emph2}"/>
<Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/> <Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/>
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Primary3}"/> <Setter Property="BorderBrush" Value="{DynamicResource Brush.Border}"/>
</Style> </Style>
<!-- ToggleButton aligned with Button --> <!-- ToggleButton aligned with Button -->
<Style Selector="ToggleButton"> <Style Selector="ToggleButton">
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}"/> <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/> <Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/>
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Primary3}"/> <Setter Property="BorderBrush" Value="{DynamicResource Brush.Border}"/>
</Style> </Style>
<Style Selector="ToggleButton:checked"> <Style Selector="ToggleButton:checked">
<Setter Property="Background" Value="{DynamicResource Brush.Primary3}"/> <Setter Property="Background" Value="{DynamicResource Brush.Primary3}"/>
</Style> </Style>
<!-- Simple card-like border using surface alt --> <!-- Simple card-like border using surface overlay -->
<Style Selector="Border.card"> <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="CornerRadius" Value="8"/>
<Setter Property="Padding" Value="8"/> <Setter Property="Padding" Value="8"/>
</Style> </Style>
<!-- Inputs --> <!-- Inputs (dark) -->
<Style Selector="TextBox"> <Style Selector="TextBox">
<Setter Property="Background" Value="#FFFFFFFF"/> <Setter Property="Background" Value="{DynamicResource Brush.InputBackground}"/>
<Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/> <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource Brush.BorderSoft}"/> <Setter Property="BorderBrush" Value="{DynamicResource Brush.InputBorder}"/>
</Style> </Style>
<Style Selector="TextBox:focus"> <Style Selector="TextBox:focus">
<Setter Property="BorderBrush" Value="{DynamicResource ThemeAccentBrush}"/> <Setter Property="BorderBrush" Value="{DynamicResource ThemeAccentBrush}"/>
@ -118,7 +122,7 @@
<Setter Property="BorderBrush" Value="{DynamicResource ThemeAccentBrush}"/> <Setter Property="BorderBrush" Value="{DynamicResource ThemeAccentBrush}"/>
</Style> </Style>
<Style Selector="ListBox"> <Style Selector="ListBox">
<Setter Property="Background" Value="{DynamicResource Brush.Surface}"/> <Setter Property="Background" Value="Transparent"/>
</Style> </Style>
<!-- Menus & flyouts --> <!-- Menus & flyouts -->
@ -134,7 +138,7 @@
<!-- Scrollbars --> <!-- Scrollbars -->
<Style Selector="ScrollBar"> <Style Selector="ScrollBar">
<Setter Property="Foreground" Value="{DynamicResource Brush.Primary3}"/> <Setter Property="Foreground" Value="{DynamicResource Brush.Primary1}"/>
<Setter Property="Background" Value="#00000000"/> <Setter Property="Background" Value="#00000000"/>
</Style> </Style>
</Styles> </Styles>

13
src/AdvancedCalculator/Views/MainView.axaml
View file

@ -26,7 +26,7 @@
<!-- Left pane: Variables only (Functions moved to flyout) --> <!-- Left pane: Variables only (Functions moved to flyout) -->
<SplitView.Pane> <SplitView.Pane>
<Grid> <Grid Background="{DynamicResource Brush.Surface}">
<!-- Variables list with empty-state hint overlay --> <!-- Variables list with empty-state hint overlay -->
<Grid Grid.Row="0"> <Grid Grid.Row="0">
@ -68,10 +68,10 @@
</SplitView.Pane> </SplitView.Pane>
<!-- Right content: History + Input --> <!-- Right content: History + Input -->
<SplitView.Content> <SplitView.Content>
<Grid RowDefinitions="*,Auto"> <Grid RowDefinitions="*,Auto">
<!-- History --> <!-- History -->
<Grid Grid.Row="0"> <Grid Grid.Row="0" Background="{DynamicResource ThemeBackgroundBrush}">
<ListBox x:Name="HistoryList" ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}" <ListBox x:Name="HistoryList" ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}"
AutomationProperties.Name="History list"> AutomationProperties.Name="History list">
<ListBox.ItemTemplate> <ListBox.ItemTemplate>
@ -139,7 +139,8 @@
Placement="BottomEdgeAlignedLeft" Placement="BottomEdgeAlignedLeft"
Opened="OnFunctionsFlyoutOpened" Opened="OnFunctionsFlyoutOpened"
Closed="OnFunctionsFlyoutClosed"> 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> <ScrollViewer>
<StackPanel> <StackPanel>
<ItemsControl ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctionGroups}"> <ItemsControl ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctionGroups}">