DodoTech-Public/DodoSSH
Public Access
2
0
Fork 0
Code Issues Pull Requests 2 Actions 1 Packages Projects Releases 2 Wiki Activity

Repaint both heads in the v5 palette and embed its three fonts

Browse Source
This commit is contained in:
jaap-jan
2026-08-07 15:25:51 +02:00
parent 49645db680
commit bea0279937
16 changed files with 611 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/DodoSSH.Client.App/App.axaml
+47 -20
View File
@@ -110,11 +110,14 @@
<!--
A chip: a bordered scrap of text stating one fact. The design uses them for tags, roles, scopes and
shortcut hints, which have nothing in common except that each is a noun the eye should be able to skip.
CornerRadius 6 rather than v2's 4: v3 draws every small chip — a tag, a pin badge — at 5-6, distinct
from the 10-12 the cards and fields moved to, so a chip keeps reading as a chip beside either.
-->
<Style Selector="Border.chip">
<Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Padding" Value="6,2" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
@@ -147,7 +150,7 @@
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Padding" Value="6,2" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="Foreground" Value="{StaticResource TextDim}" />
@@ -185,7 +188,7 @@
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="7" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="Foreground" Value="{StaticResource TextDim}" />
</Style>
<Style Selector="Button.ghost:pointerover /template/ ContentPresenter#PART_ContentPresenter">
@@ -199,25 +202,45 @@
<Setter Property="Foreground" Value="{StaticResource TextFaint}" />
</Style>
<!--
The primary action, and since v3 filled with a gradient rather than a flat colour: the design draws
every accent button top-to-bottom from a lighter violet into the accent proper, and lifts it off the
surface with a soft violet glow instead of a border. Both live in Palette.axaml as AccentGradient and
AccentGlow, named there rather than here for the reason every other accent value is — see the remark
on the pair in that file.
BoxShadow is set here rather than on the Button itself: this rule already targets the template's
ContentPresenter for Background for the Fluent-override reason explained above, and ContentPresenter
carries its own BoxShadow property in Avalonia 11, so the glow and the fill live on the same element
and move together.
-->
<Style Selector="Button.accent /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{StaticResource Accent}" />
<Setter Property="Background" Value="{StaticResource AccentGradient}" />
<Setter Property="BoxShadow" Value="{StaticResource AccentGlow}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="7" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="Foreground" Value="{StaticResource AccentInk}" />
</Style>
<Style Selector="Button.accent:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{StaticResource Accent}" />
<Setter Property="Background" Value="{StaticResource AccentGradient}" />
<Setter Property="Opacity" Value="0.85" />
<Setter Property="Foreground" Value="{StaticResource AccentInk}" />
</Style>
<!--
A disabled accent button keeps its shape and loses its fill. Fluent's disabled state greys the
foreground and leaves the background, which on a green slab is unreadable rather than merely dim.
foreground and leaves the background, which on a purple slab is unreadable rather than merely dim.
BoxShadow is cleared here too, and that is new alongside the gradient: the base rule now sets a glow
that reads as "this is lit and wants pressing", which is the opposite of what a disabled control
should say. Left unset it would still apply — the base rule's Setter is still in effect wherever a
more specific one does not override it — so the glow has to be named here, as the empty string
BoxShadows parses to "no shadows", to go away.
-->
<Style Selector="Button.accent:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{StaticResource BorderFaint}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BoxShadow" Value="" />
<Setter Property="Foreground" Value="{StaticResource TextFaint}" />
</Style>
@@ -225,7 +248,7 @@
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{StaticResource DangerSoft}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="7" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="Foreground" Value="{StaticResource Danger}" />
</Style>
<Style Selector="Button.danger:pointerover /template/ ContentPresenter#PART_ContentPresenter">
@@ -530,7 +553,7 @@
<Setter Property="Background" Value="{StaticResource Field}" />
<Setter Property="BorderBrush" Value="{StaticResource Border}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="Foreground" Value="{StaticResource Text}" />
<Setter Property="SelectionBrush" Value="{StaticResource AccentSoft}" />
<Setter Property="CaretBrush" Value="{StaticResource Accent}" />
@@ -628,7 +651,7 @@
<Setter Property="Background" Value="{StaticResource Raised}" />
<Setter Property="BorderBrush" Value="{StaticResource Border}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="CornerRadius" Value="12" />
<Setter Property="Padding" Value="12,10" />
<Setter Property="Width" Value="232" />
<Setter Property="Margin" Value="0,0,10,10" />
@@ -724,14 +747,16 @@
stacked controls is fourteen.
Raised on Sidebar, which is the one pairing that works in this column. Panel and Chrome are the same
value as each other and near enough Sidebar to vanish against it, and Field is the well a control sits
in — a card drawn in it would read as one enormous input.
value as each other and near enough Sidebar to vanish against it. Field no longer reads as a well
beneath either: v3 gives a field and a card the same fill, where a field used to sit visibly below
one — see the remark on Field in Palette.axaml. What still marks a field as a field here is its
border and its focus state, not a darker surface underneath it.
-->
<Style Selector="Border.section">
<Setter Property="Background" Value="{StaticResource Raised}" />
<Setter Property="BorderBrush" Value="{StaticResource Border}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="CornerRadius" Value="12" />
<Setter Property="Padding" Value="12" />
</Style>
@@ -831,12 +856,14 @@
decoration that reads as information.
A style rather than a value converter so that the two colours are the palette's, once. A converter
would have had to name #3DDC97 in C#, which is how a green ends up one shade off in the fourth place
it appears.
would have had to name the hex value in C#, which is how a green ends up one shade off in the fourth
place it appears — and it has already moved once, from v2's #3DDC97 to this design's #34D399, without
touching this file.
Live rather than Accent, and that is a v2 change with meaning rather than a recolour. The accent is
blue now, and the green survives as the colour of a fact — see the remark on Live in Palette.axaml.
Filling this with Accent would say a connected host is a thing to press.
Live rather than Accent, and that is a v2 change with meaning rather than a recolour, one that survives
the accent moving again from blue to purple in v3: the green is the colour of a fact regardless of what
hue the accent currently is — see the remark on Live in Palette.axaml. Filling this with Accent would
say a connected host is a thing to press.
-->
<Style Selector="Ellipse.dot">
<Setter Property="Width" Value="6" />
@@ -925,7 +952,7 @@
<Style Selector="ComboBox">
<Setter Property="Background" Value="{StaticResource Field}" />
<Setter Property="BorderBrush" Value="{StaticResource Border}" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="Foreground" Value="{StaticResource Text}" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="FontSize" Value="13" />
@@ -933,7 +960,7 @@
<Style Selector="NumericUpDown">
<Setter Property="Background" Value="{StaticResource Field}" />
<Setter Property="BorderBrush" Value="{StaticResource Border}" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="CornerRadius" Value="10" />
<Setter Property="Foreground" Value="{StaticResource Text}" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="FontSize" Value="13" />