feat(ui): add design Tokens resource dictionary
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mika kuns
201
src/ClaudeDo.Ui/Design/Tokens.axaml
Normal file
201
src/ClaudeDo.Ui/Design/Tokens.axaml
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user