design: white ink on any accent fill (on-accent token)

The EDIT button's armed face used on-tertiary (#0b1326 navy) on blue — the creator read it as grey
on blue and could not read it. Same problem, latent, on the armed REC/ON-AIR pills, which used the
error ink.

One rule instead of two exceptions: a saturated accent fill carries WHITE ink. New token
on-accent #ffffff, used by the EDIT trigger and RecordPillToggle; on-tertiary stays for large blue
surfaces where dark ink is right. UiShellTests pins the EDIT foreground to it.
This commit is contained in:
2026-10-30 10:34:19 -07:00
parent 568586c541
commit d25dbf58dc
5 changed files with 6 additions and 4 deletions
+1 -1
View File
@@ -68,7 +68,7 @@
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="EditBody" Property="Background" Value="{StaticResource Brush.Tertiary}"/>
<Setter Property="Foreground" Value="{StaticResource Brush.OnTertiary}"/>
<Setter Property="Foreground" Value="{StaticResource Brush.OnAccent}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
+2 -1
View File
@@ -43,7 +43,8 @@
| Token | Hex | Role |
|---|---|---|
| `tertiary` (electric blue) | `#38bdf8` | **The** interactive accent: selection, focus, sliders, primary buttons, transform handles |
| `on-tertiary` | `#0b1326` | Text/icon on a blue fill |
| `on-tertiary` | `#0b1326` | Dark ink, for large blue **surfaces** only |
| `on-accent` | `#ffffff` | Text/icon on any saturated accent fill — the blue EDIT button, the armed REC/ON-AIR pills. One rule: a coloured fill carries white ink |
| `primary` (red) | `#ff5451` | **On-air / recording only** — LIVE badge, program border, End/Go Live |
| `primary-container` | `#b91a24` | Red pressed/hover state |
| `secondary` (amber) | `#ffb95f` | Game audio channel, Super Chat highlight |
+1 -1
View File
@@ -770,7 +770,7 @@
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="{StaticResource Brush.Primary}"/>
<Setter Property="Foreground" Value="{StaticResource Brush.OnError}"/>
<Setter Property="Foreground" Value="{StaticResource Brush.OnAccent}"/>
</Trigger>
</Style.Triggers>
</Style>
+1
View File
@@ -34,6 +34,7 @@
<!-- Accent roles: one per meaning, never mixed -->
<SolidColorBrush x:Key="Brush.Tertiary" Color="#38bdf8"/>
<SolidColorBrush x:Key="Brush.OnTertiary" Color="#0b1326"/>
<SolidColorBrush x:Key="Brush.OnAccent" Color="#ffffff"/>
<SolidColorBrush x:Key="Brush.Primary" Color="#ff5451"/>
<SolidColorBrush x:Key="Brush.PrimaryContainer" Color="#b91a24"/>
<SolidColorBrush x:Key="Brush.Secondary" Color="#ffb95f"/>
+1 -1
View File
@@ -30,7 +30,7 @@ public class UiShellTests
// 2. EDIT: resting face differs from the armed face, and the label follows it.
Assert.Contains("x:Name=\"EditBody\" Background=\"{StaticResource Brush.SurfaceContainerHigh}\"", topBar);
Assert.Contains("<Setter TargetName=\"EditBody\" Property=\"Background\" Value=\"{StaticResource Brush.Tertiary}\"/>", topBar);
Assert.Contains("<Setter Property=\"Foreground\" Value=\"{StaticResource Brush.OnTertiary}\"/>", topBar);
Assert.Contains("<Setter Property=\"Foreground\" Value=\"{StaticResource Brush.OnAccent}\"/>", topBar);
// 3. Active scene = orange; live stays red.
Assert.Contains("IsStaged}\" Value=\"True\">\n <Setter Property=\"BorderBrush\" Value=\"{StaticResource Brush.Attention}\"/>", strip);