From 92a6e0642e6ab99c95f8ac6798db6752d169159c Mon Sep 17 00:00:00 2001
From: mika kuns <mika.kuns@fb-tuning.de>
Date: Mon, 20 Apr 2026 10:06:10 +0200
Subject: [PATCH] feat(ui): add design Tokens resource dictionary

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/ClaudeDo.Ui/Design/Tokens.axaml | 201 ++++++++++++++++++++++++++++
 1 file changed, 201 insertions(+)
 create mode 100644 src/ClaudeDo.Ui/Design/Tokens.axaml

diff --git a/src/ClaudeDo.Ui/Design/Tokens.axaml b/src/ClaudeDo.Ui/Design/Tokens.axaml
new file mode 100644
index 0000000..a671315
--- /dev/null
+++ b/src/ClaudeDo.Ui/Design/Tokens.axaml
@@ -0,0 +1,201 @@
+<!--
+  ClaudeDo design tokens for Avalonia.
+  Merge into App.axaml via <Application.Resources><ResourceDictionary.MergedDictionaries>.
+  All colors are sRGB hex. Accent uses a single hue (88 = moss); swap to 40 for peat, 180 for sea.
+-->
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:sys="clr-namespace:System;assembly=netstandard">
+
+  <!-- ============================================================ -->
+  <!-- BASE PALETTE                                                 -->
+  <!-- ============================================================ -->
+
+  <!-- Void / deep / surfaces (windowpane layering, dark-first) -->
+  <Color x:Key="VoidColor">#FF0A0E0C</Color>
+  <Color x:Key="DeepColor">#FF0D1311</Color>
+  <Color x:Key="SurfaceColor">#FF161D1A</Color>
+  <Color x:Key="Surface2Color">#FF1C2422</Color>
+  <Color x:Key="Surface3Color">#FF222B28</Color>
+  <Color x:Key="LineColor">#FF2A3330</Color>
+  <Color x:Key="LineBrightColor">#FF3A4542</Color>
+
+  <!-- Text scale -->
+  <Color x:Key="TextColor">#FFE4EBE4</Color>
+  <Color x:Key="TextDimColor">#FF9AA8A0</Color>
+  <Color x:Key="TextMuteColor">#FF6B7973</Color>
+  <Color x:Key="TextFaintColor">#FF4A5550</Color>
+
+  <!-- Accent family (moss / sage / peat / blood) -->
+  <Color x:Key="MossColor">#FF4A6B4A</Color>
+  <Color x:Key="MossBrightColor">#FF6B8E6B</Color>
+  <Color x:Key="SageColor">#FF8B9D7A</Color>
+  <Color x:Key="PeatColor">#FFD4A574</Color>
+  <Color x:Key="PeatSoftColor">#FFB88D5E</Color>
+  <Color x:Key="BloodColor">#FFC87060</Color>
+
+  <!-- Primary accent — equivalent to oklch(58% 0.08 88) -->
+  <Color x:Key="AccentColor">#FF7C9166</Color>
+  <Color x:Key="AccentDimColor">#FF64785A</Color>
+  <Color x:Key="AccentSoftColor">#FF3E4B39</Color>
+  <Color x:Key="AccentGlowColor">#387C9166</Color> <!-- 22% alpha -->
+
+  <!-- Status colors -->
+  <Color x:Key="StatusRunningColor">#FF7C9166</Color>
+  <Color x:Key="StatusReviewColor">#FFD4A574</Color>
+  <Color x:Key="StatusErrorColor">#FFC87060</Color>
+  <Color x:Key="StatusQueuedColor">#FF8B9D7A</Color>
+  <Color x:Key="StatusIdleColor">#FF6B7973</Color>
+
+  <!-- ============================================================ -->
+  <!-- BRUSHES                                                      -->
+  <!-- ============================================================ -->
+
+  <SolidColorBrush x:Key="VoidBrush"        Color="{StaticResource VoidColor}" />
+  <SolidColorBrush x:Key="DeepBrush"        Color="{StaticResource DeepColor}" />
+  <SolidColorBrush x:Key="SurfaceBrush"     Color="{StaticResource SurfaceColor}" />
+  <SolidColorBrush x:Key="Surface2Brush"    Color="{StaticResource Surface2Color}" />
+  <SolidColorBrush x:Key="Surface3Brush"    Color="{StaticResource Surface3Color}" />
+  <SolidColorBrush x:Key="LineBrush"        Color="{StaticResource LineColor}" />
+  <SolidColorBrush x:Key="LineBrightBrush"  Color="{StaticResource LineBrightColor}" />
+
+  <SolidColorBrush x:Key="TextBrush"        Color="{StaticResource TextColor}" />
+  <SolidColorBrush x:Key="TextDimBrush"     Color="{StaticResource TextDimColor}" />
+  <SolidColorBrush x:Key="TextMuteBrush"    Color="{StaticResource TextMuteColor}" />
+  <SolidColorBrush x:Key="TextFaintBrush"   Color="{StaticResource TextFaintColor}" />
+
+  <!-- MossBrush at #7C9166 (design-token reference value = AccentColor) -->
+  <SolidColorBrush x:Key="MossBrush"        Color="{StaticResource AccentColor}" />
+  <SolidColorBrush x:Key="MossDarkBrush"    Color="{StaticResource MossColor}" />
+  <SolidColorBrush x:Key="MossBrightBrush"  Color="{StaticResource MossBrightColor}" />
+  <SolidColorBrush x:Key="SageBrush"        Color="{StaticResource SageColor}" />
+  <SolidColorBrush x:Key="PeatBrush"        Color="{StaticResource PeatColor}" />
+  <SolidColorBrush x:Key="PeatSoftBrush"    Color="{StaticResource PeatSoftColor}" />
+  <SolidColorBrush x:Key="BloodBrush"       Color="{StaticResource BloodColor}" />
+
+  <SolidColorBrush x:Key="AccentBrush"      Color="{StaticResource AccentColor}" />
+  <SolidColorBrush x:Key="AccentDimBrush"   Color="{StaticResource AccentDimColor}" />
+  <SolidColorBrush x:Key="AccentSoftBrush"  Color="{StaticResource AccentSoftColor}" />
+  <SolidColorBrush x:Key="AccentGlowBrush"  Color="{StaticResource AccentGlowColor}" />
+
+  <SolidColorBrush x:Key="StatusRunningBrush" Color="{StaticResource StatusRunningColor}" />
+  <SolidColorBrush x:Key="StatusReviewBrush"  Color="{StaticResource StatusReviewColor}" />
+  <SolidColorBrush x:Key="StatusErrorBrush"   Color="{StaticResource StatusErrorColor}" />
+  <SolidColorBrush x:Key="StatusQueuedBrush"  Color="{StaticResource StatusQueuedColor}" />
+  <SolidColorBrush x:Key="StatusIdleBrush"    Color="{StaticResource StatusIdleColor}" />
+
+  <!-- Window-body gradient layers (apply as LinearGradientBrush in the main content Border) -->
+  <LinearGradientBrush x:Key="DesktopBackgroundBrush" StartPoint="0%,0%" EndPoint="0%,100%">
+    <GradientStop Offset="0"   Color="#FF05070A" />
+    <GradientStop Offset="0.5" Color="#FF0A0D10" />
+    <GradientStop Offset="1"   Color="#FF060A08" />
+  </LinearGradientBrush>
+
+  <LinearGradientBrush x:Key="IslandBackgroundBrush" StartPoint="0%,0%" EndPoint="0%,100%">
+    <GradientStop Offset="0" Color="{StaticResource SurfaceColor}" />
+    <GradientStop Offset="1" Color="#FF131917" />
+  </LinearGradientBrush>
+
+  <!-- ============================================================ -->
+  <!-- SPACING                                                      -->
+  <!-- ============================================================ -->
+
+  <x:Double x:Key="SpaceXs">4</x:Double>
+  <x:Double x:Key="SpaceSm">8</x:Double>
+  <x:Double x:Key="SpaceMd">12</x:Double>
+  <x:Double x:Key="SpaceLg">14</x:Double>   <!-- island gap -->
+  <x:Double x:Key="SpaceXl">18</x:Double>   <!-- island interior padding -->
+  <x:Double x:Key="Space2Xl">24</x:Double>
+
+  <Thickness x:Key="IslandGapMargin">7</Thickness>         <!-- half of 14 on each side -->
+  <Thickness x:Key="IslandHeaderPadding">18,16,18,12</Thickness>
+  <Thickness x:Key="IslandBodyPadding">14</Thickness>
+  <Thickness x:Key="WindowBodyPadding">14</Thickness>
+
+  <!-- ============================================================ -->
+  <!-- CORNERS & BORDERS                                            -->
+  <!-- ============================================================ -->
+
+  <CornerRadius x:Key="IslandCornerRadius">14</CornerRadius>
+  <CornerRadius x:Key="ButtonCornerRadius">6</CornerRadius>
+  <CornerRadius x:Key="ChipCornerRadius">10</CornerRadius>
+  <CornerRadius x:Key="PillCornerRadius">999</CornerRadius>
+  <CornerRadius x:Key="InputCornerRadius">8</CornerRadius>
+  <CornerRadius x:Key="ModalCornerRadius">12</CornerRadius>
+
+  <!-- Radius doubles for use in numeric contexts -->
+  <x:Double x:Key="IslandRadius">14</x:Double>
+  <x:Double x:Key="ModalRadius">12</x:Double>
+  <x:Double x:Key="ChipRadius">10</x:Double>
+  <x:Double x:Key="RowRadius">8</x:Double>
+  <x:Double x:Key="ButtonRadius">6</x:Double>
+
+  <Thickness x:Key="HairlineBorder">1</Thickness>
+
+  <!-- ============================================================ -->
+  <!-- TYPOGRAPHY                                                   -->
+  <!-- ============================================================ -->
+
+  <!--
+    Pack these fonts with the app (use Avalonia's FontFamily='avares://...#Family Name' syntax).
+    Sans:  Inter Tight (display) + Inter (body fallback)
+    Mono:  JetBrains Mono
+  -->
+  <FontFamily x:Key="SansFont">avares://ClaudeDo.Ui/Assets/Fonts/#Inter Tight, Inter, Segoe UI, -apple-system, sans-serif</FontFamily>
+  <FontFamily x:Key="MonoFont">avares://ClaudeDo.Ui/Assets/Fonts/#JetBrains Mono, IBM Plex Mono, Cascadia Mono, Consolas, monospace</FontFamily>
+
+  <!-- Aliases matching plan-required key names -->
+  <FontFamily x:Key="SansFamily">avares://ClaudeDo.Ui/Assets/Fonts/#Inter Tight, Inter, Segoe UI, -apple-system, sans-serif</FontFamily>
+  <FontFamily x:Key="MonoFamily">avares://ClaudeDo.Ui/Assets/Fonts/#JetBrains Mono, IBM Plex Mono, Cascadia Mono, Consolas, monospace</FontFamily>
+
+  <!-- Type scale -->
+  <x:Double x:Key="FontSizeEyebrow">10</x:Double>    <!-- uppercase label, 0.14em tracking -->
+  <x:Double x:Key="FontSizeMono">11</x:Double>       <!-- chips, log lines, filepaths -->
+  <x:Double x:Key="FontSizeMicro">11</x:Double>      <!-- meta rows -->
+  <x:Double x:Key="FontSizeBody">13</x:Double>
+  <x:Double x:Key="FontSizeTaskTitle">14</x:Double>
+  <x:Double x:Key="FontSizeH3">18</x:Double>
+  <x:Double x:Key="FontSizeH2">24</x:Double>         <!-- island titles ("My Day") -->
+  <x:Double x:Key="FontSizeH1">32</x:Double>
+
+  <!-- Common text styles -->
+  <Style x:Key="EyebrowText" Selector="TextBlock.eyebrow">
+    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeEyebrow}" />
+    <Setter Property="Foreground" Value="{StaticResource TextFaintBrush}" />
+    <Setter Property="LetterSpacing" Value="1.4" />
+  </Style>
+
+  <Style x:Key="MonoText" Selector="TextBlock.mono">
+    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeMono}" />
+    <Setter Property="Foreground" Value="{StaticResource TextDimBrush}" />
+  </Style>
+
+  <Style x:Key="IslandTitle" Selector="TextBlock.island-title">
+    <Setter Property="FontFamily" Value="{StaticResource SansFont}" />
+    <Setter Property="FontSize"   Value="{StaticResource FontSizeH2}" />
+    <Setter Property="FontWeight" Value="SemiBold" />
+    <Setter Property="Foreground" Value="{StaticResource TextBrush}" />
+    <Setter Property="TextTrimming" Value="CharacterEllipsis" />
+  </Style>
+
+  <!-- ============================================================ -->
+  <!-- SHADOWS (use on Island Border via BoxShadow)                 -->
+  <!-- ============================================================ -->
+
+  <BoxShadows x:Key="IslandShadow">0 20 40 0 #59000000, 0 2 4 0 #4D000000</BoxShadows>
+  <BoxShadows x:Key="ModalShadow">0 40 80 0 #B2000000</BoxShadows>
+  <BoxShadows x:Key="SubtleShadow">0 2 4 0 #33000000</BoxShadows>
+
+  <!-- ============================================================ -->
+  <!-- MOTION                                                       -->
+  <!-- ============================================================ -->
+
+  <sys:TimeSpan x:Key="MotionFast">0:0:0.12</sys:TimeSpan>
+  <sys:TimeSpan x:Key="MotionBase">0:0:0.18</sys:TimeSpan>
+  <sys:TimeSpan x:Key="MotionSlow">0:0:0.30</sys:TimeSpan>
+
+  <!-- Standard easing: cubic-bezier(0.4, 0, 0.2, 1) — equivalent to Avalonia's CubicEaseOut for most UI -->
+
+</ResourceDictionary>