design: three tokens the sweep needed — positive, scrim-dark, scrim-dark-strong

The palette had no green for status and no black scrim, so two surfaces were about to either
invent literals or misuse an accent. Creator's call (2026-10-30): give green a token rather
than painting "connected" blue, which already means five other things.

- `positive` #22c55e — STATUS ONLY (connected, applied, healthy). Never an accent, never a
  button fill; the doc says so and the guard parses the doc.
- `scrim-dark` #26000000 (15% black) and `scrim-dark-strong` #00000080 (50%) — the preview's dim
  strips and heavy overlays. 18 sites justify a token, and they are structural, not decoration.
- LeftPanel's ✓ confirm now wears `positive` instead of the interactive accent, matching the
  status rule the new token states.

DesignTokensTests still green: the doc is the contract, so the three new rows demanded three
new brushes and got them.
This commit is contained in:
2026-10-30 08:03:18 -07:00
parent 2dbc35b285
commit 3edb0d10be
3 changed files with 9 additions and 3 deletions
+3 -3
View File
@@ -397,7 +397,7 @@
<Button DockPanel.Dock="Right" Style="{StaticResource IconButton}" <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
Width="22" Height="22" Margin="4,0,0,0" Width="22" Height="22" Margin="4,0,0,0"
Click="WebcamBorderAccept_Click"> Click="WebcamBorderAccept_Click">
<Path Data="M4,9 L8,14 L16,4" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="2" <Path Data="M4,9 L8,14 L16,4" Stroke="{StaticResource Brush.Positive}" StrokeThickness="2"
Width="14" Height="14" Stretch="Uniform"/> Width="14" Height="14" Stretch="Uniform"/>
</Button> </Button>
<Button DockPanel.Dock="Right" Style="{StaticResource IconButton}" <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
@@ -454,7 +454,7 @@
<Button DockPanel.Dock="Right" Style="{StaticResource IconButton}" <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
Width="22" Height="22" Margin="4,0,0,0" Width="22" Height="22" Margin="4,0,0,0"
Click="CountdownAccept_Click"> Click="CountdownAccept_Click">
<Path Data="M4,9 L8,14 L16,4" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="2" <Path Data="M4,9 L8,14 L16,4" Stroke="{StaticResource Brush.Positive}" StrokeThickness="2"
Width="14" Height="14" Stretch="Uniform"/> Width="14" Height="14" Stretch="Uniform"/>
</Button> </Button>
<Button DockPanel.Dock="Right" Style="{StaticResource IconButton}" <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
@@ -495,7 +495,7 @@
<Button DockPanel.Dock="Right" Style="{StaticResource IconButton}" <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
Width="22" Height="22" Margin="4,0,0,0" IsTabStop="False" Width="22" Height="22" Margin="4,0,0,0" IsTabStop="False"
Click="WebAccept_Click"> Click="WebAccept_Click">
<Path Data="M4,9 L8,14 L16,4" Stroke="{StaticResource Brush.Tertiary}" StrokeThickness="2" <Path Data="M4,9 L8,14 L16,4" Stroke="{StaticResource Brush.Positive}" StrokeThickness="2"
Width="14" Height="14" Stretch="Uniform"/> Width="14" Height="14" Stretch="Uniform"/>
</Button> </Button>
<Button DockPanel.Dock="Right" Style="{StaticResource IconButton}" <Button DockPanel.Dock="Right" Style="{StaticResource IconButton}"
+3
View File
@@ -27,6 +27,8 @@
| `outline-variant` | `#1e293b` | Subtle dividers, inactive meter segments | | `outline-variant` | `#1e293b` | Subtle dividers, inactive meter segments |
| `scrim-soft` | `#22FFFFFF` | Hover/press wash over a surface (13% white) | | `scrim-soft` | `#22FFFFFF` | Hover/press wash over a surface (13% white) |
| `scrim-strong` | `#26FFFFFF` | Stronger wash — selected icon, dimmed image (15% white) | | `scrim-strong` | `#26FFFFFF` | Stronger wash — selected icon, dimmed image (15% white) |
| `scrim-dark` | `#26000000` | Dim strip / shading over the preview (15% black) |
| `scrim-dark-strong` | `#00000080` | Heavy overlay — modal veil, poster frame (50% black) |
### Text ### Text
@@ -47,6 +49,7 @@
| `secondary` (amber) | `#ffb95f` | Game audio channel, Super Chat highlight | | `secondary` (amber) | `#ffb95f` | Game audio channel, Super Chat highlight |
| `secondary-container` | `#ee9800` | Amber pressed/hover state | | `secondary-container` | `#ee9800` | Amber pressed/hover state |
| `attention` (orange) | `#ff8c3a` | Dropped frames, the live-screen indicator, blinking warnings | | `attention` (orange) | `#ff8c3a` | Dropped frames, the live-screen indicator, blinking warnings |
| `positive` | `#22c55e` | **Status only** — connected, applied, healthy. Never an accent, never a button fill |
| `error` | `#ef4444` | Error text and icons | | `error` | `#ef4444` | Error text and icons |
| `error-container` | `#93000a` | Error surface (health banner, toast) — keeps error visually distinct from on-air red | | `error-container` | `#93000a` | Error surface (health banner, toast) — keeps error visually distinct from on-air red |
| `on-error` | `#ffdad6` | Text on an error surface | | `on-error` | `#ffdad6` | Text on an error surface |
+3
View File
@@ -23,6 +23,8 @@
<SolidColorBrush x:Key="Brush.OutlineVariant" Color="#1e293b"/> <SolidColorBrush x:Key="Brush.OutlineVariant" Color="#1e293b"/>
<SolidColorBrush x:Key="Brush.ScrimSoft" Color="#22FFFFFF"/> <SolidColorBrush x:Key="Brush.ScrimSoft" Color="#22FFFFFF"/>
<SolidColorBrush x:Key="Brush.ScrimStrong" Color="#26FFFFFF"/> <SolidColorBrush x:Key="Brush.ScrimStrong" Color="#26FFFFFF"/>
<SolidColorBrush x:Key="Brush.ScrimDark" Color="#26000000"/>
<SolidColorBrush x:Key="Brush.ScrimDarkStrong" Color="#00000080"/>
<!-- Text --> <!-- Text -->
<SolidColorBrush x:Key="Brush.OnSurface" Color="#dae2fd"/> <SolidColorBrush x:Key="Brush.OnSurface" Color="#dae2fd"/>
@@ -37,6 +39,7 @@
<SolidColorBrush x:Key="Brush.Secondary" Color="#ffb95f"/> <SolidColorBrush x:Key="Brush.Secondary" Color="#ffb95f"/>
<SolidColorBrush x:Key="Brush.SecondaryContainer" Color="#ee9800"/> <SolidColorBrush x:Key="Brush.SecondaryContainer" Color="#ee9800"/>
<SolidColorBrush x:Key="Brush.Attention" Color="#ff8c3a"/> <SolidColorBrush x:Key="Brush.Attention" Color="#ff8c3a"/>
<SolidColorBrush x:Key="Brush.Positive" Color="#22c55e"/>
<SolidColorBrush x:Key="Brush.Error" Color="#ef4444"/> <SolidColorBrush x:Key="Brush.Error" Color="#ef4444"/>
<SolidColorBrush x:Key="Brush.ErrorContainer" Color="#93000a"/> <SolidColorBrush x:Key="Brush.ErrorContainer" Color="#93000a"/>
<SolidColorBrush x:Key="Brush.OnError" Color="#ffdad6"/> <SolidColorBrush x:Key="Brush.OnError" Color="#ffdad6"/>