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:
@@ -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>
|
||||
|
||||
@@ -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 |
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"/>
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user