Files
LlamaCasty/Themes/Tokens.xaml
T
gramps 6b4aa99863 feat(topbar): the segmented mode switcher, to the mock
Implements the creator's mock (2026-11-12) for the world segment: pill track (#1E222B, radius 12,
padding 4) holding two equal halves; the active half sits on a lighter pill (#2E3440, radius 8) with
#E2E8F0 bold text and a coral (#F26D6D) icon; the inactive half is #8892A4 on a one-alpha black face so
the whole area hit-tests; hover tints #252A34 on the inactive half only, so the active one never looks
clickable-but-dim. Labels are "Build scenes" / "Record / go live".

Two deliberate deviations from the pasted recipe, both to honour this repo:
- State is the existing BarWorld binding plus a command, not a code-behind SetActiveMode — one source of
  truth, and the change still raises the same property-changed notification a mode event would.
- Styles live in Themes/Controls.xaml (SegmentHalf, SegmentIcon) with colours as tokens in Tokens.xaml,
  rather than inline properties on the elements: AGENTS requires shared styles, and one DataTrigger on
  each element's own Tag serves both halves.

DesignTokensTests caught the one raw literal (#01000000) and it is now Brush.SegmentHitArea, which is the
rule working as intended.

680 pass, 0 warnings. Scope justification: Assets/starting-background.jpg is outside this unit — the
creator's replacement art, still awaiting their visual check.
2026-11-12 16:20:25 -08:00

108 lines
5.7 KiB
XML

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=System.Runtime">
<!-- ============================================================================
DESIGN TOKENS — the only place a raw value may live.
Source of truth: DESIGN.md (normative). Guard: ytLive.Tests/DesignTokensTests.cs,
which fails if a documented token has no brush here, or the values disagree.
Merge order: App.xaml merges this BEFORE Themes/Controls.xaml, so every style can
reference a token instead of a literal.
============================================================================ -->
<!-- Surfaces (dark navy scale) -->
<SolidColorBrush x:Key="Brush.Background" Color="#0b1326"/>
<SolidColorBrush x:Key="Brush.SurfaceContainerLowest" Color="#060e20"/>
<SolidColorBrush x:Key="Brush.SurfaceContainerLow" Color="#131b2e"/>
<SolidColorBrush x:Key="Brush.SurfaceContainer" Color="#171f33"/>
<SolidColorBrush x:Key="Brush.SurfaceContainerHigh" Color="#222a3d"/>
<SolidColorBrush x:Key="Brush.SurfaceContainerHighest" Color="#2d3449"/>
<SolidColorBrush x:Key="Brush.SurfaceBright" Color="#31394d"/>
<SolidColorBrush x:Key="Brush.Outline" Color="#334155"/>
<SolidColorBrush x:Key="Brush.OutlineVariant" Color="#1e293b"/>
<SolidColorBrush x:Key="Brush.ScrimSoft" Color="#22FFFFFF"/>
<SolidColorBrush x:Key="Brush.ScrimStrong" Color="#26FFFFFF"/>
<SolidColorBrush x:Key="Brush.ScrimDark" Color="#26000000"/>
<SolidColorBrush x:Key="Brush.ScrimDarkStrong" Color="#00000080"/>
<!-- Text -->
<SolidColorBrush x:Key="Brush.OnSurface" Color="#dae2fd"/>
<SolidColorBrush x:Key="Brush.OnSurfaceVariant" Color="#94a3b8"/>
<SolidColorBrush x:Key="Brush.OnSurfaceDisabled" Color="#5b6478"/>
<!-- 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"/>
<!-- Segmented mode switcher (creator mock, 2026-11-12) -->
<SolidColorBrush x:Key="Brush.SegmentTrack" Color="#1E222B"/>
<SolidColorBrush x:Key="Brush.SegmentActive" Color="#2E3440"/>
<SolidColorBrush x:Key="Brush.SegmentHover" Color="#252A34"/>
<SolidColorBrush x:Key="Brush.SegmentTextActive" Color="#E2E8F0"/>
<SolidColorBrush x:Key="Brush.SegmentTextInactive" Color="#8892A4"/>
<SolidColorBrush x:Key="Brush.SegmentIconActive" Color="#F26D6D"/>
<!-- One-alpha black: transparent to the eye, opaque to hit-testing, so the whole segment is clickable. -->
<SolidColorBrush x:Key="Brush.SegmentHitArea" Color="#01000000"/>
<SolidColorBrush x:Key="Brush.Primary" Color="#ff5451"/>
<SolidColorBrush x:Key="Brush.PrimaryContainer" Color="#b91a24"/>
<SolidColorBrush x:Key="Brush.Secondary" Color="#ffb95f"/>
<SolidColorBrush x:Key="Brush.SecondaryContainer" Color="#ee9800"/>
<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.ErrorContainer" Color="#93000a"/>
<SolidColorBrush x:Key="Brush.OnError" Color="#ffdad6"/>
<SolidColorBrush x:Key="Brush.InfoContainer" Color="#3a3b52"/>
<SolidColorBrush x:Key="Brush.SuccessContainer" Color="#1d5c38"/>
<SolidColorBrush x:Key="Brush.WarningContainer" Color="#b8860b"/>
<SolidColorBrush x:Key="Brush.TestContainer" Color="#9c6f1c"/>
<SolidColorBrush x:Key="Brush.Youtube" Color="#ff0000"/>
<!-- Colours (for gradients that cannot take a brush) -->
<Color x:Key="Color.Background">#0b1326</Color>
<Color x:Key="Color.Tertiary">#38bdf8</Color>
<Color x:Key="Color.SurfaceContainerLowest">#060e20</Color>
<!-- Meter bands (measured levels, never gain settings) -->
<SolidColorBrush x:Key="Brush.Meter.Nominal" Color="#38bdf8"/>
<SolidColorBrush x:Key="Brush.Meter.Caution" Color="#ffb95f"/>
<SolidColorBrush x:Key="Brush.Meter.Peak" Color="#ff5451"/>
<!-- Typography. Both families ship as WPF resources in Assets/Fonts (no install, no
network). The `#Family` form resolves them from the pack folder. -->
<FontFamily x:Key="FontFamily.Sans">/Assets/Fonts/#Inter</FontFamily>
<FontFamily x:Key="FontFamily.Mono">/Assets/Fonts/#JetBrains Mono</FontFamily>
<sys:Double x:Key="FontSize.HeadlineLg">32</sys:Double>
<sys:Double x:Key="FontSize.HeadlineMd">24</sys:Double>
<sys:Double x:Key="FontSize.HeadlineSm">18</sys:Double>
<sys:Double x:Key="FontSize.BodyLg">15</sys:Double>
<sys:Double x:Key="FontSize.BodyMd">13</sys:Double>
<sys:Double x:Key="FontSize.BodySm">12</sys:Double>
<sys:Double x:Key="FontSize.LabelLg">13</sys:Double>
<sys:Double x:Key="FontSize.LabelMd">11</sys:Double>
<sys:Double x:Key="FontSize.LabelSm">10</sys:Double>
<!-- Spacing -->
<sys:Double x:Key="Space.Xs">4</sys:Double>
<sys:Double x:Key="Space.Sm">8</sys:Double>
<sys:Double x:Key="Space.Md">12</sys:Double>
<sys:Double x:Key="Space.Lg">16</sys:Double>
<sys:Double x:Key="Space.Xl">24</sys:Double>
<sys:Double x:Key="Space.Gutter">12</sys:Double>
<sys:Double x:Key="Space.Margin">16</sys:Double>
<sys:Double x:Key="Space.MarginDocked">8</sys:Double>
<!-- Shape -->
<CornerRadius x:Key="Radius.Sm">4</CornerRadius>
<CornerRadius x:Key="Radius.Md">8</CornerRadius>
<CornerRadius x:Key="Radius.Lg">16</CornerRadius>
<!-- Motion -->
<Duration x:Key="Motion.Fast">0:0:0.09</Duration>
<Duration x:Key="Motion.Normal">0:0:0.15</Duration>
</ResourceDictionary>