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
This commit is contained in:
Codex CLI
parent
88306f0091
commit
dca25f6d89
2 changed files with 37 additions and 32 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue