docs: add UI-rewrite notes, plans, and stream-formatter spec
This commit is contained in:
Mika Kuns
240
docs/UI Rewrite/design_handoff_claudedo/IslandStyles.axaml
Normal file
240
docs/UI Rewrite/design_handoff_claudedo/IslandStyles.axaml
Normal file
@@ -0,0 +1,240 @@
|
||||
<!--
|
||||
ClaudeDo component styles for Avalonia.
|
||||
Depends on Tokens.axaml being merged first.
|
||||
|
||||
How to use each style:
|
||||
<Border Classes="island"> — floating island container
|
||||
<Border Classes="chip running"> — status chip
|
||||
<Button Classes="icon-btn"> — 24×24 icon button
|
||||
<Button Classes="btn primary"> — rounded-rect button
|
||||
<TextBlock Classes="eyebrow"> — uppercase mono label
|
||||
<Border Classes="agent-strip running"> — agent status strip
|
||||
<Border Classes="terminal"> — terminal/log window
|
||||
-->
|
||||
<Styles xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- ISLAND -->
|
||||
<!-- ============================================================ -->
|
||||
<Style Selector="Border.island">
|
||||
<Setter Property="Background" Value="{StaticResource IslandBackgroundBrush}" />
|
||||
<Setter Property="BorderBrush" Value="#0DFFFFFF" />
|
||||
<Setter Property="BorderThickness" Value="1" />
|
||||
<Setter Property="CornerRadius" Value="{StaticResource IslandCornerRadius}" />
|
||||
<Setter Property="BoxShadow" Value="{StaticResource IslandShadow}" />
|
||||
<Setter Property="ClipToBounds" Value="True" />
|
||||
</Style>
|
||||
|
||||
<!-- Island header separator (apply on the header Border inside an island) -->
|
||||
<Style Selector="Border.island-header">
|
||||
<Setter Property="Padding" Value="{StaticResource IslandHeaderPadding}" />
|
||||
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
|
||||
<Setter Property="BorderThickness" Value="0,0,0,1" />
|
||||
</Style>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- CHIPS / BADGES -->
|
||||
<!-- ============================================================ -->
|
||||
<Style Selector="Border.chip">
|
||||
<Setter Property="CornerRadius" Value="{StaticResource ChipCornerRadius}" />
|
||||
<Setter Property="Padding" Value="8,3" />
|
||||
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
|
||||
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
|
||||
<Setter Property="BorderThickness" Value="1" />
|
||||
</Style>
|
||||
<Style Selector="Border.chip > TextBlock">
|
||||
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
|
||||
<Setter Property="FontSize" Value="10" />
|
||||
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
|
||||
</Style>
|
||||
|
||||
<!-- Status variants — tint background 12% alpha of the status hue -->
|
||||
<Style Selector="Border.chip.running">
|
||||
<Setter Property="Background" Value="#1F7C9166" />
|
||||
<Setter Property="BorderBrush" Value="#4C7C9166" />
|
||||
</Style>
|
||||
<Style Selector="Border.chip.running > TextBlock">
|
||||
<Setter Property="Foreground" Value="{StaticResource StatusRunningBrush}" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="Border.chip.review">
|
||||
<Setter Property="Background" Value="#1FD4A574" />
|
||||
<Setter Property="BorderBrush" Value="#4CD4A574" />
|
||||
</Style>
|
||||
<Style Selector="Border.chip.review > TextBlock">
|
||||
<Setter Property="Foreground" Value="{StaticResource StatusReviewBrush}" />
|
||||
</Style>
|
||||
|
||||
<Style Selector="Border.chip.error">
|
||||
<Setter Property="Background" Value="#1FC87060" />
|
||||
<Setter Property="BorderBrush" Value="#4CC87060" />
|
||||
</Style>
|
||||
<Style Selector="Border.chip.error > TextBlock">
|
||||
<Setter Property="Foreground" Value="{StaticResource StatusErrorBrush}" />
|
||||
</Style>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- BUTTONS -->
|
||||
<!-- ============================================================ -->
|
||||
<Style Selector="Button.btn">
|
||||
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
|
||||
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
|
||||
<Setter Property="BorderThickness" Value="1" />
|
||||
<Setter Property="CornerRadius" Value="{StaticResource ButtonCornerRadius}" />
|
||||
<Setter Property="Padding" Value="10,6" />
|
||||
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
|
||||
<Setter Property="FontSize" Value="11" />
|
||||
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
|
||||
<Setter Property="Transitions">
|
||||
<Transitions>
|
||||
<BrushTransition Property="Background" Duration="0:0:0.12" />
|
||||
<BrushTransition Property="BorderBrush" Duration="0:0:0.12" />
|
||||
</Transitions>
|
||||
</Setter>
|
||||
</Style>
|
||||
<Style Selector="Button.btn:pointerover /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="{StaticResource Surface3Brush}" />
|
||||
<Setter Property="BorderBrush" Value="{StaticResource LineBrightBrush}" />
|
||||
</Style>
|
||||
<Style Selector="Button.btn.primary">
|
||||
<Setter Property="Background" Value="{StaticResource AccentDimBrush}" />
|
||||
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
|
||||
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
|
||||
</Style>
|
||||
|
||||
<!-- Icon button: 24×24 square with hover surface -->
|
||||
<Style Selector="Button.icon-btn">
|
||||
<Setter Property="Width" Value="24" />
|
||||
<Setter Property="Height" Value="24" />
|
||||
<Setter Property="Padding" Value="0" />
|
||||
<Setter Property="Background" Value="Transparent" />
|
||||
<Setter Property="BorderThickness" Value="0" />
|
||||
<Setter Property="CornerRadius" Value="6" />
|
||||
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
|
||||
</Style>
|
||||
<Style Selector="Button.icon-btn:pointerover /template/ ContentPresenter">
|
||||
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
|
||||
<Setter Property="TextElement.Foreground" Value="{StaticResource TextBrush}" />
|
||||
</Style>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- INPUTS -->
|
||||
<!-- ============================================================ -->
|
||||
<Style Selector="TextBox.search">
|
||||
<Setter Property="Background" Value="{StaticResource DeepBrush}" />
|
||||
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
|
||||
<Setter Property="BorderThickness" Value="1" />
|
||||
<Setter Property="CornerRadius" Value="{StaticResource InputCornerRadius}" />
|
||||
<Setter Property="Padding" Value="10,8" />
|
||||
<Setter Property="FontSize" Value="13" />
|
||||
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
|
||||
<Setter Property="CaretBrush" Value="{StaticResource AccentBrush}" />
|
||||
</Style>
|
||||
<Style Selector="TextBox.search:focus /template/ Border#PART_BorderElement">
|
||||
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
|
||||
<Setter Property="BoxShadow" Value="0 0 0 3 #387C9166" />
|
||||
</Style>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- TASK ROW -->
|
||||
<!-- ============================================================ -->
|
||||
<Style Selector="Border.task-row">
|
||||
<Setter Property="Padding" Value="12,10" />
|
||||
<Setter Property="CornerRadius" Value="8" />
|
||||
<Setter Property="Background" Value="Transparent" />
|
||||
<Setter Property="Cursor" Value="Hand" />
|
||||
</Style>
|
||||
<Style Selector="Border.task-row:pointerover">
|
||||
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
|
||||
</Style>
|
||||
<Style Selector="Border.task-row.selected">
|
||||
<Setter Property="Background" Value="{StaticResource Surface3Brush}" />
|
||||
<Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
|
||||
<Setter Property="BorderThickness" Value="0,0,0,0" />
|
||||
<!-- Left-edge accent bar: use a nested Border child with Width=2 instead of inset shadow -->
|
||||
</Style>
|
||||
|
||||
<!-- Checkbox indicator (the 18px circle that replaces the native CheckBox template) -->
|
||||
<Style Selector="Ellipse.task-check">
|
||||
<Setter Property="Width" Value="18" />
|
||||
<Setter Property="Height" Value="18" />
|
||||
<Setter Property="StrokeThickness" Value="1.5" />
|
||||
<Setter Property="Stroke" Value="{StaticResource TextFaintBrush}" />
|
||||
<Setter Property="Fill" Value="Transparent" />
|
||||
</Style>
|
||||
<Style Selector="Ellipse.task-check.done">
|
||||
<Setter Property="Stroke" Value="{StaticResource AccentBrush}" />
|
||||
<Setter Property="Fill" Value="{StaticResource AccentBrush}" />
|
||||
</Style>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- AGENT STRIP -->
|
||||
<!-- ============================================================ -->
|
||||
<Style Selector="Border.agent-strip">
|
||||
<Setter Property="Padding" Value="12,10" />
|
||||
<Setter Property="CornerRadius" Value="10" />
|
||||
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
|
||||
<Setter Property="BorderThickness" Value="1" />
|
||||
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
|
||||
</Style>
|
||||
<Style Selector="Border.agent-strip.running">
|
||||
<Setter Property="Background" Value="#147C9166" />
|
||||
<Setter Property="BorderBrush" Value="#4C7C9166" />
|
||||
</Style>
|
||||
<Style Selector="Border.agent-strip.review">
|
||||
<Setter Property="Background" Value="#14D4A574" />
|
||||
<Setter Property="BorderBrush" Value="#4CD4A574" />
|
||||
</Style>
|
||||
<Style Selector="Border.agent-strip.error">
|
||||
<Setter Property="Background" Value="#14C87060" />
|
||||
<Setter Property="BorderBrush" Value="#4CC87060" />
|
||||
</Style>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- TERMINAL / LOG -->
|
||||
<!-- ============================================================ -->
|
||||
<Style Selector="Border.terminal">
|
||||
<Setter Property="Background" Value="#FF080C0B" />
|
||||
<Setter Property="CornerRadius" Value="8" />
|
||||
<Setter Property="Padding" Value="12" />
|
||||
<Setter Property="BorderBrush" Value="{StaticResource LineBrush}" />
|
||||
<Setter Property="BorderThickness" Value="1" />
|
||||
</Style>
|
||||
<Style Selector="Border.terminal TextBlock">
|
||||
<Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
|
||||
<Setter Property="FontSize" Value="11" />
|
||||
<Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
|
||||
</Style>
|
||||
<Style Selector="Border.terminal TextBlock.log-sys">
|
||||
<Setter Property="Foreground" Value="{StaticResource TextMuteBrush}" />
|
||||
</Style>
|
||||
<Style Selector="Border.terminal TextBlock.log-tool">
|
||||
<Setter Property="Foreground" Value="{StaticResource SageBrush}" />
|
||||
</Style>
|
||||
<Style Selector="Border.terminal TextBlock.log-claude">
|
||||
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
|
||||
</Style>
|
||||
<Style Selector="Border.terminal TextBlock.log-stderr">
|
||||
<Setter Property="Foreground" Value="{StaticResource BloodBrush}" />
|
||||
</Style>
|
||||
<Style Selector="Border.terminal TextBlock.log-done">
|
||||
<Setter Property="Foreground" Value="{StaticResource MossBrightBrush}" />
|
||||
</Style>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- LIST NAV ITEM -->
|
||||
<!-- ============================================================ -->
|
||||
<Style Selector="Border.list-item">
|
||||
<Setter Property="Padding" Value="10,7" />
|
||||
<Setter Property="CornerRadius" Value="8" />
|
||||
<Setter Property="Cursor" Value="Hand" />
|
||||
</Style>
|
||||
<Style Selector="Border.list-item:pointerover">
|
||||
<Setter Property="Background" Value="{StaticResource Surface2Brush}" />
|
||||
</Style>
|
||||
<Style Selector="Border.list-item.active">
|
||||
<Setter Property="Background" Value="{StaticResource AccentSoftBrush}" />
|
||||
</Style>
|
||||
|
||||
</Styles>
|
||||
Reference in New Issue
Block a user