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