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

theme: add centralized palette and apply across app\n\n- Add Colors.axaml with brand palette (primary/emphasis)\n- Wire into App.axaml; set default window/text styles\n- Theme buttons + variants (success/warning/danger)\n- Align browser splash colors to palette

Browse source
This commit is contained in:
Codex CLI 2025-08-28 05:00:20 -05:00
commit 8480975309
3 changed files with 97 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/AdvancedCalculator.Browser/wwwroot/app.css
View file

@ -3,7 +3,7 @@
position: absolute;
height: 100%;
width: 100%;
background: white;
background: white; /* light fallback */
font-family: 'Outfit', sans-serif;
justify-content: center;
align-items: center;
@ -13,31 +13,15 @@
/* Light theme styles */
@media (prefers-color-scheme: light) {
.avalonia-splash {
background: white;
}
.avalonia-splash h2 {
color: #1b2a4e;
}
.avalonia-splash a {
color: #0D6EFD;
}
.avalonia-splash { background: #FFFFFF; }
.avalonia-splash h2 { color: #223544; } /* --c-primary-2 */
.avalonia-splash a { color: #5AC3D6; } /* --c-primary-1 */
}
@media (prefers-color-scheme: dark) {
.avalonia-splash {
background: #1b2a4e;
}
.avalonia-splash h2 {
color: white;
}
.avalonia-splash a {
color: white;
}
.avalonia-splash { background: #223544; } /* --c-primary-2 */
.avalonia-splash h2 { color: #FFFFFF; }
.avalonia-splash a { color: #5AC3D6; } /* --c-primary-1 */
}
.avalonia-splash h2 {

1
src/AdvancedCalculator/App.axaml
View file

@ -6,6 +6,7 @@
<Application.Styles>
<FluentTheme />
<StyleInclude Source="avares://AdvancedCalculator/Styles/Colors.axaml"/>
<StyleInclude Source="avares://AdvancedCalculator/Styles/Buttons.axaml"/>
<StyleInclude Source="avares://AdvancedCalculator/Styles/Typography.axaml"/>
<StyleInclude Source="avares://AdvancedCalculator/Styles/Scroll.axaml"/>

89
src/AdvancedCalculator/Styles/Colors.axaml Normal file
View file

@ -0,0 +1,89 @@
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Styles.Resources>
<!-- Core palette -->
<Color x:Key="CPrimary1">#FF5AC3D6</Color>
<Color x:Key="CPrimary2">#FF223544</Color>
<Color x:Key="CPrimary3">#FF4E6D84</Color>
<Color x:Key="CEmph1">#FFF5A623</Color>
<Color x:Key="CEmph2">#FFD94E87</Color>
<Color x:Key="CEmph3">#FF49C46D</Color>
<!-- Brushes from palette -->
<SolidColorBrush x:Key="Brush.Primary1" Color="{DynamicResource CPrimary1}"/>
<SolidColorBrush x:Key="Brush.Primary2" Color="{DynamicResource CPrimary2}"/>
<SolidColorBrush x:Key="Brush.Primary3" Color="{DynamicResource CPrimary3}"/>
<SolidColorBrush x:Key="Brush.Emph1" Color="{DynamicResource CEmph1}"/>
<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">#F0F4F7</SolidColorBrush>
<SolidColorBrush x:Key="Brush.SurfaceAlt" Color="{DynamicResource CPrimary3}" Opacity="0.10"/>
<SolidColorBrush x:Key="Brush.Foreground">#FF0F1A21</SolidColorBrush>
<SolidColorBrush x:Key="Brush.ForegroundOnPrimary">#FFFFFFFF</SolidColorBrush>
<!-- Accent + theme integration (FluentTheme consumes these) -->
<SolidColorBrush x:Key="ThemeAccentBrush" Color="{DynamicResource CPrimary1}"/>
<SolidColorBrush x:Key="ThemeBackgroundBrush" Color="{DynamicResource Brush.Surface.Color}"/>
<SolidColorBrush x:Key="ThemeForegroundBrush" Color="{DynamicResource Brush.Foreground.Color}"/>
</Styles.Resources>
<!-- Window background -->
<Style Selector="Window">
<Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}"/>
</Style>
<!-- Default text color across the app -->
<Style Selector="TextBlock">
<Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}"/>
</Style>
<!-- Primary buttons themed with accent color -->
<Style Selector="Button">
<Setter Property="Background" Value="{DynamicResource ThemeAccentBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource Brush.ForegroundOnPrimary}"/>
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Primary3}"/>
</Style>
<Style Selector="Button:pointerover">
<Setter Property="Background" Value="{DynamicResource Brush.Primary1}"/>
<Setter Property="Opacity" Value="0.95"/>
</Style>
<Style Selector="Button:pressed">
<Setter Property="Opacity" Value="0.88"/>
</Style>
<!-- Emphasis button variants (opt-in via classes) -->
<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}"/>
</Style>
<Style Selector="Button.warning">
<Setter Property="Background" Value="{DynamicResource Brush.Emph1}"/>
<Setter Property="Foreground" Value="#FF222222"/>
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Primary3}"/>
</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}"/>
</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}"/>
</Style>
<Style Selector="ToggleButton:checked">
<Setter Property="Background" Value="{DynamicResource Brush.Primary3}"/>
</Style>
<!-- Simple card-like border using surface alt -->
<Style Selector="Border.card">
<Setter Property="Background" Value="{DynamicResource Brush.SurfaceAlt}"/>
<Setter Property="CornerRadius" Value="8"/>
<Setter Property="Padding" Value="8"/>
</Style>
</Styles>