Add AI-related color resources to theme palette and demo (#689)

* Initial plan * Add AI-related color resources for Light and Dark themes Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * Fix gradient angle to correctly represent 278 degrees Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * Fix gradient angle and add AI resources to palette demo Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * Add AI General gradients section to palette demo UI Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * feat: unify gradient initialization. * feat: add AI-related color resources for Light and Dark themes. * feat: add AI-related color tokens to ColorTokens and PaletteDemo * Rename AI token names from Ai to AI (capital) Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> * fix: fix AI-related color tokens names. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: rabbitism <14807942+rabbitism@users.noreply.github.com> Co-authored-by: Dong Bin <popmessiah@hotmail.com> Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
2026-03-02 15:50:49 +08:00 · 2025-11-03 15:18:49 +08:00
parent bbff875d9c
commit f92b5f4373
5 changed files with 386 additions and 6 deletions
--- a/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs
+++ b/demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs
@@ -79,6 +79,32 @@ public static class ColorTokens
        new("SemiColorDangerLightActive", "Danger Light Active")
    ];

+    public static IReadOnlyList<Tuple<string, string>> AIGeneralTokens { get; } =
+    [
+        new("SemiColorAIGeneral", "AI General"),
+        new("SemiColorAIGeneralPointerover", "AI General Pointerover"),
+        new("SemiColorAIGeneralActive", "AI General Active"),
+        new("SemiColorAIGeneralDisabled", "AI General Disabled")
+    ];
+
+    public static IReadOnlyList<Tuple<string, string>> AIPurpleTokens { get; } =
+    [
+        new("SemiColorAIPurple", "AI Purple"),
+        new("SemiColorAIPurplePointerover", "AI Purple Pointerover"),
+        new("SemiColorAIPurpleActive", "AI Purple Active"),
+        new("SemiColorAIPurpleDisabled", "AI Purple Disabled")
+    ];
+
+    public static IReadOnlyList<Tuple<string, string>> AIBackgroundTokens { get; } =
+    [
+        new("SemiColorAIBackgroundBottom", "AI Bottom Background"),
+        new("SemiColorAIBackgroundBottomPointerover", "AI Bottom Background Pointerover"),
+        new("SemiColorAIBackgroundBottomActive", "AI Bottom Background Active"),
+        new("SemiColorAIBackgroundTop", "AI Top Background"),
+        new("SemiColorAIBackgroundTopPointerover", "AI Top Background Pointerover"),
+        new("SemiColorAIBackgroundTopActive", "AI Top Background Active"),
+    ];
+
    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } =
    [
        new("SemiColorText0", "Text 0"),
--- a/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
+++ b/demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs
@@ -92,6 +92,12 @@ public class ColorDetailControl : TemplatedControl
            Hex2 = hex2 as string;
            OpacityNumber = brush.Opacity.ToString(CultureInfo.InvariantCulture);
        }
+        else
+        {
+            Hex = null;
+            Hex2 = null;
+            OpacityNumber = null;
+        }
    }

    public async Task Copy(object o)
--- a/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
+++ b/demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
@@ -19,7 +19,7 @@ public partial class PaletteDemoViewModel : ObservableObject
        "Red", "Pink", "Purple", "Violet", "Indigo",
        "Blue", "LightBlue", "Cyan", "Teal", "Green",
        "LightGreen", "Lime", "Yellow", "Amber", "Orange",
-        "Grey"
+        "Grey", "AIPurple"
    ];

    private readonly IResourceDictionary? _lightResourceDictionary;
@@ -61,6 +61,38 @@ public partial class PaletteDemoViewModel : ObservableObject
            s.Initialize(_darkResourceDictionary, color, false);
            DarkLists.Add(s);
        }
+        
+        InitializeAIGeneralGradients();
+    }
+
+    private void InitializeAIGeneralGradients()
+    {
+        if (_lightResourceDictionary is null || _darkResourceDictionary is null) return;
+
+        ColorListViewModel lightGradients = new ColorListViewModel { SeriesName = "AI General" };
+        ColorListViewModel darkGradients = new ColorListViewModel { SeriesName = "AI General" };
+
+        for (var i = 0; i < 10; i++)
+        {
+            var key = $"SemiAIGeneral{i}";
+            
+            if (_lightResourceDictionary.TryGetValue(key, out var lightValue) && lightValue is IBrush lightBrush)
+            {
+                var name = $"AI General {i}";
+                var item = new ColorItemViewModel(name, lightBrush, key, true, i);
+                lightGradients.Color.Add(item);
+            }
+
+            if (_darkResourceDictionary.TryGetValue(key, out var darkValue) && darkValue is IBrush darkBrush)
+            {
+                var name = $"AI General {i}";
+                var item = new ColorItemViewModel(name, darkBrush, key, false, i);
+                darkGradients.Color.Add(item);
+            }
+        }
+        
+        LightLists.Add(lightGradients);
+        DarkLists.Add(darkGradients);
    }

    private void InitializeFunctionalColors()
@@ -79,6 +111,12 @@ public partial class PaletteDemoViewModel : ObservableObject
            "Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
        FunctionalColors.Add(new FunctionalColorGroupViewModel(
            "Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+            "AI General", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.AIGeneralTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+            "AI Purple", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.AIPurpleTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel(
+            "AI Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.AIBackgroundTokens));
        FunctionalColors.Add(new FunctionalColorGroupViewModel(
            "Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens));
        FunctionalColors.Add(new FunctionalColorGroupViewModel(
@@ -142,14 +180,24 @@ public partial class ColorItemViewModel : ObservableObject
         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
         """;

-    public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light,
+    public ColorItemViewModel(string colorDisplayName, IBrush brush, string resourceKey, bool light,
        int index)
    {
        ColorDisplayName = colorDisplayName;
        Brush = brush;
        ResourceKey = resourceKey;
-        var hex = ColorConverter.ToHex.Convert(brush.Color, typeof(string), false, CultureInfo.InvariantCulture);
-        Hex = hex as string ?? string.Empty;
+        
+        // Only calculate hex for solid color brushes
+        if (brush is ISolidColorBrush solidBrush)
+        {
+            var hex = ColorConverter.ToHex.Convert(solidBrush.Color, typeof(string), false, CultureInfo.InvariantCulture);
+            Hex = hex as string ?? string.Empty;
+        }
+        else
+        {
+            Hex = string.Empty;
+        }
+        
        if ((light && index < 5) || (!light && index >= 5))
        {
            TextBrush = Brushes.Black;
@@ -175,7 +223,7 @@ public partial class FunctionalColorGroupViewModel : ObservableObject
        {
            if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
            {
-                if (lightValue is ISolidColorBrush lightBrush)
+                if (lightValue is IBrush lightBrush)
                {
                    LightColors.Add(new ColorItemViewModel(name, lightBrush, key, true, 0));
                }
@@ -183,7 +231,7 @@ public partial class FunctionalColorGroupViewModel : ObservableObject

            if (darkDictionary?.TryGetValue(key, out var darkValue) ?? false)
            {
-                if (darkValue is ISolidColorBrush darkBrush)
+                if (darkValue is IBrush darkBrush)
                {
                    DarkColors.Add(new ColorItemViewModel(name, darkBrush, key, true, 0));
                }
--- a/src/Semi.Avalonia/Tokens/Palette/Dark.axaml
+++ b/src/Semi.Avalonia/Tokens/Palette/Dark.axaml
@@ -170,6 +170,16 @@
    <Color x:Key="SemiBackground2Color">#35363C</Color>
    <Color x:Key="SemiBackground3Color">#43444A</Color>
    <Color x:Key="SemiBackground4Color">#4F5159</Color>
+    <Color x:Key="SemiAIPurple0Color">#3A1770</Color>
+    <Color x:Key="SemiAIPurple1Color">#532394</Color>
+    <Color x:Key="SemiAIPurple2Color">#6F31B8</Color>
+    <Color x:Key="SemiAIPurple3Color">#8D41DB</Color>
+    <Color x:Key="SemiAIPurple4Color">#A744FF</Color>
+    <Color x:Key="SemiAIPurple5Color">#C375FF</Color>
+    <Color x:Key="SemiAIPurple6Color">#D598FF</Color>
+    <Color x:Key="SemiAIPurple7Color">#E5BAFF</Color>
+    <Color x:Key="SemiAIPurple8Color">#F3DDFF</Color>
+    <Color x:Key="SemiAIPurple9Color">#FBF3FF</Color>

    <SolidColorBrush x:Key="SemiWhite" Color="{StaticResource SemiWhiteColor}" />
    <SolidColorBrush x:Key="SemiBlack" Color="{StaticResource SemiBlackColor}" />
@@ -333,6 +343,76 @@
    <SolidColorBrush x:Key="SemiGrey7" Color="{StaticResource SemiGrey7Color}" />
    <SolidColorBrush x:Key="SemiGrey8" Color="{StaticResource SemiGrey8Color}" />
    <SolidColorBrush x:Key="SemiGrey9" Color="{StaticResource SemiGrey9Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple0" Color="{StaticResource SemiAIPurple0Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple1" Color="{StaticResource SemiAIPurple1Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple2" Color="{StaticResource SemiAIPurple2Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple3" Color="{StaticResource SemiAIPurple3Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple4" Color="{StaticResource SemiAIPurple4Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple5" Color="{StaticResource SemiAIPurple5Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple6" Color="{StaticResource SemiAIPurple6Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple7" Color="{StaticResource SemiAIPurple7Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple8" Color="{StaticResource SemiAIPurple8Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple9" Color="{StaticResource SemiAIPurple9Color}" />
+    <LinearGradientBrush x:Key="SemiAIGeneral0" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#092C64" />
+        <GradientStop Offset="0.3" Color="#271D6C" />
+        <GradientStop Offset="0.6" Color="#3A1770" />
+        <GradientStop Offset="1.0" Color="#501265" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral1" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#114088" />
+        <GradientStop Offset="0.3" Color="#362B90" />
+        <GradientStop Offset="0.6" Color="#532394" />
+        <GradientStop Offset="1.0" Color="#711C89" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral2" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#1A56AC" />
+        <GradientStop Offset="0.3" Color="#463BB4" />
+        <GradientStop Offset="0.6" Color="#6F31B8" />
+        <GradientStop Offset="1.0" Color="#9429AD" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral3" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#266FCF" />
+        <GradientStop Offset="0.3" Color="#584ED7" />
+        <GradientStop Offset="0.6" Color="#8D41DB" />
+        <GradientStop Offset="1.0" Color="#B937D0" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral4" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#237FF0" />
+        <GradientStop Offset="0.3" Color="#5E54F8" />
+        <GradientStop Offset="0.6" Color="#A744FF" />
+        <GradientStop Offset="1.0" Color="#DB38F1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral5" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#5BA2F5" />
+        <GradientStop Offset="0.3" Color="#8681FC" />
+        <GradientStop Offset="0.6" Color="#C375FF" />
+        <GradientStop Offset="1.0" Color="#EA6BF6" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral6" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#83BBF8" />
+        <GradientStop Offset="0.3" Color="#A3A0FD" />
+        <GradientStop Offset="0.6" Color="#D598FF" />
+        <GradientStop Offset="1.0" Color="#F38FF8" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral7" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#ACD2FA" />
+        <GradientStop Offset="0.3" Color="#C0C0FD" />
+        <GradientStop Offset="0.6" Color="#E5BAFF" />
+        <GradientStop Offset="1.0" Color="#F9B4FB" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral8" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#D5E9FD" />
+        <GradientStop Offset="0.3" Color="#DFDFFE" />
+        <GradientStop Offset="0.6" Color="#F3DDFF" />
+        <GradientStop Offset="1.0" Color="#FDD9FC" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral9" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#EFF7FE" />
+        <GradientStop Offset="0.3" Color="#F4F4FF" />
+        <GradientStop Offset="0.6" Color="#FBF3FF" />
+        <GradientStop Offset="1.0" Color="#FEF1FE" />
+    </LinearGradientBrush>
    <!-- Official Color=#E4E7F5 -->
    <SolidColorBrush x:Key="SemiColorWhite" Color="{StaticResource SemiWhiteColor}" />
    <SolidColorBrush x:Key="SemiColorBlack" Color="{StaticResource SemiBlackColor}" />
@@ -390,6 +470,76 @@
    <SolidColorBrush x:Key="SemiColorDangerLightPointerover" Opacity="0.3" Color="{StaticResource SemiRed5Color}" />
    <SolidColorBrush x:Key="SemiColorDangerLightActive" Opacity="0.4" Color="{StaticResource SemiRed5Color}" />

+    <!-- AI General -->
+    <LinearGradientBrush x:Key="SemiColorAIGeneral" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#5BA2F5" />
+        <GradientStop Offset="0.3" Color="#8681FC" />
+        <GradientStop Offset="0.6" Color="#C375FF" />
+        <GradientStop Offset="1.0" Color="#EA6BF6" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIGeneralPointerover" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#83BBF8" />
+        <GradientStop Offset="0.3" Color="#A3A0FD" />
+        <GradientStop Offset="0.6" Color="#D598FF" />
+        <GradientStop Offset="1.0" Color="#F38FF8" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIGeneralActive" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#ACD2FA" />
+        <GradientStop Offset="0.3" Color="#C0C0FD" />
+        <GradientStop Offset="0.6" Color="#E5BAFF" />
+        <GradientStop Offset="1.0" Color="#F9B4FB" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIGeneralDisabled" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#1A56AC" />
+        <GradientStop Offset="0.3" Color="#463BB4" />
+        <GradientStop Offset="0.6" Color="#6F31B8" />
+        <GradientStop Offset="1.0" Color="#9429AD" />
+    </LinearGradientBrush>
+
+    <!-- AI Purple -->
+    <SolidColorBrush x:Key="SemiColorAIPurple" Color="{StaticResource SemiAIPurple5Color}" />
+    <SolidColorBrush x:Key="SemiColorAIPurplePointerover" Color="{StaticResource SemiAIPurple6Color}" />
+    <SolidColorBrush x:Key="SemiColorAIPurpleActive" Color="{StaticResource SemiAIPurple7Color}" />
+    <SolidColorBrush x:Key="SemiColorAIPurpleDisabled" Color="{StaticResource SemiAIPurple2Color}" />
+
+    <!-- AI Background -->
+    <LinearGradientBrush x:Key="SemiColorAIBackgroundBottom" StartPoint="69.35%,0%" EndPoint="30.65%,100%">
+        <GradientStop Offset="0.0658" Color="#33FFE28A" />
+        <GradientStop Offset="0.504" Color="#33E72DFF" />
+        <GradientStop Offset="0.9423" Color="#330073FF" />
+    </LinearGradientBrush>
+
+    <LinearGradientBrush x:Key="SemiColorAIBackgroundBottomPointerover" StartPoint="69.35%,0%" EndPoint="30.65%,100%">
+        <GradientStop Offset="0.0658" Color="#4DFFE28A" />
+        <GradientStop Offset="0.504" Color="#4DE72DFF" />
+        <GradientStop Offset="0.9423" Color="#4D0073FF" />
+    </LinearGradientBrush>
+
+    <LinearGradientBrush x:Key="SemiColorAIBackgroundBottomActive" StartPoint="69.35%,0%" EndPoint="30.65%,100%">
+        <GradientStop Offset="0.0658" Color="#66FFE28A" />
+        <GradientStop Offset="0.504" Color="#66E72DFF" />
+        <GradientStop Offset="0.9423" Color="#660073FF" />
+    </LinearGradientBrush>
+
+    <LinearGradientBrush x:Key="SemiColorAIBackgroundTop" StartPoint="69.35%,0%" EndPoint="30.65%,100%">
+        <GradientStop Offset="0.0658" Color="#5C5338FF" />
+        <GradientStop Offset="0.3288" Color="#37B030F0" />
+        <GradientStop Offset="0.5917" Color="#1C9A00AE" />
+        <GradientStop Offset="0.9423" Color="#00000000" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIBackgroundTopPointerover" StartPoint="69.35%,0%" EndPoint="30.65%,100%">
+        <GradientStop Offset="0.0658" Color="#8A5338FF" />
+        <GradientStop Offset="0.3288" Color="#53B030F0" />
+        <GradientStop Offset="0.5917" Color="#299A00AE" />
+        <GradientStop Offset="0.9423" Color="#00000000" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIBackgroundTopActive" StartPoint="69.35%,0%" EndPoint="30.65%,100%">
+        <GradientStop Offset="0.0658" Color="#B85338FF" />
+        <GradientStop Offset="0.3288" Color="#6EB030F0" />
+        <GradientStop Offset="0.5917" Color="#379A00AE" />
+        <GradientStop Offset="0.9423" Color="#00000000" />
+    </LinearGradientBrush>
+
    <!--  Text and Icons  -->
    <SolidColorBrush x:Key="SemiColorText0" Color="{StaticResource SemiGrey9Color}" />
    <SolidColorBrush x:Key="SemiColorText1" Opacity="0.8" Color="{StaticResource SemiGrey9Color}" />
--- a/src/Semi.Avalonia/Tokens/Palette/Light.axaml
+++ b/src/Semi.Avalonia/Tokens/Palette/Light.axaml
@@ -170,6 +170,16 @@
    <Color x:Key="SemiBackground2Color">White</Color>
    <Color x:Key="SemiBackground3Color">White</Color>
    <Color x:Key="SemiBackground4Color">White</Color>
+    <Color x:Key="SemiAIPurple0Color">#F8EDFF</Color>
+    <Color x:Key="SemiAIPurple1Color">#F2DAFF</Color>
+    <Color x:Key="SemiAIPurple2Color">#E3B5FF</Color>
+    <Color x:Key="SemiAIPurple3Color">#D191FF</Color>
+    <Color x:Key="SemiAIPurple4Color">#BD6CFF</Color>
+    <Color x:Key="SemiAIPurple5Color">#A647FF</Color>
+    <Color x:Key="SemiAIPurple6Color">#8636DB</Color>
+    <Color x:Key="SemiAIPurple7Color">#6928B8</Color>
+    <Color x:Key="SemiAIPurple8Color">#4E1C94</Color>
+    <Color x:Key="SemiAIPurple9Color">#361270</Color>

    <SolidColorBrush x:Key="SemiWhite" Color="{StaticResource SemiWhiteColor}" />
    <SolidColorBrush x:Key="SemiBlack" Color="{StaticResource SemiBlackColor}" />
@@ -333,6 +343,76 @@
    <SolidColorBrush x:Key="SemiGrey7" Color="{StaticResource SemiGrey7Color}" />
    <SolidColorBrush x:Key="SemiGrey8" Color="{StaticResource SemiGrey8Color}" />
    <SolidColorBrush x:Key="SemiGrey9" Color="{StaticResource SemiGrey9Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple0" Color="{StaticResource SemiAIPurple0Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple1" Color="{StaticResource SemiAIPurple1Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple2" Color="{StaticResource SemiAIPurple2Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple3" Color="{StaticResource SemiAIPurple3Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple4" Color="{StaticResource SemiAIPurple4Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple5" Color="{StaticResource SemiAIPurple5Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple6" Color="{StaticResource SemiAIPurple6Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple7" Color="{StaticResource SemiAIPurple7Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple8" Color="{StaticResource SemiAIPurple8Color}" />
+    <SolidColorBrush x:Key="SemiAIPurple9" Color="{StaticResource SemiAIPurple9Color}" />
+    <LinearGradientBrush x:Key="SemiAIGeneral0" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#FFF2FF" />
+        <GradientStop Offset="0.3" Color="#F8EDFF" />
+        <GradientStop Offset="0.6" Color="#F4F4FF" />
+        <GradientStop Offset="1.0" Color="#EFF7FF" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral1" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#FFDAFE" />
+        <GradientStop Offset="0.3" Color="#F2DAFF" />
+        <GradientStop Offset="0.6" Color="#DFE0FF" />
+        <GradientStop Offset="1.0" Color="#D5EBFF" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral2" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#FEB5FF" />
+        <GradientStop Offset="0.3" Color="#E3B5FF" />
+        <GradientStop Offset="0.6" Color="#C1C0FF" />
+        <GradientStop Offset="1.0" Color="#ABD5FF" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral3" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#F98FFF" />
+        <GradientStop Offset="0.3" Color="#D191FF" />
+        <GradientStop Offset="0.6" Color="#A3A0FF" />
+        <GradientStop Offset="1.0" Color="#82BEFF" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral4" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#F26AFF" />
+        <GradientStop Offset="0.3" Color="#BD6CFF" />
+        <GradientStop Offset="0.6" Color="#8681FF" />
+        <GradientStop Offset="1.0" Color="#58A6FF" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral5" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#E945FF" />
+        <GradientStop Offset="0.3" Color="#A647FF" />
+        <GradientStop Offset="0.6" Color="#6B61FF" />
+        <GradientStop Offset="1.0" Color="#2E8CFF" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral6" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#C235DB" />
+        <GradientStop Offset="0.3" Color="#8636DB" />
+        <GradientStop Offset="0.6" Color="#584DDB" />
+        <GradientStop Offset="1.0" Color="#2172DB" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral7" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#9D27B8" />
+        <GradientStop Offset="0.3" Color="#6928B8" />
+        <GradientStop Offset="0.6" Color="#473BB8" />
+        <GradientStop Offset="1.0" Color="#1659B8" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral8" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#791B94" />
+        <GradientStop Offset="0.3" Color="#4E1C94" />
+        <GradientStop Offset="0.6" Color="#372B94" />
+        <GradientStop Offset="1.0" Color="#0D4394" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiAIGeneral9" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#581170" />
+        <GradientStop Offset="0.3" Color="#361270" />
+        <GradientStop Offset="0.6" Color="#281D70" />
+        <GradientStop Offset="1.0" Color="#072F70" />
+    </LinearGradientBrush>

    <SolidColorBrush x:Key="SemiColorWhite" Color="{StaticResource SemiWhiteColor}" />
    <SolidColorBrush x:Key="SemiColorBlack" Color="{StaticResource SemiBlackColor}" />
@@ -390,6 +470,76 @@
    <SolidColorBrush x:Key="SemiColorDangerLightPointerover" Color="{StaticResource SemiRed1Color}" />
    <SolidColorBrush x:Key="SemiColorDangerLightActive" Color="{StaticResource SemiRed2Color}" />

+    <!-- AI General -->
+    <LinearGradientBrush x:Key="SemiColorAIGeneral" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#E945FF" />
+        <GradientStop Offset="0.3" Color="#A647FF" />
+        <GradientStop Offset="0.6" Color="#6B61FF" />
+        <GradientStop Offset="1.0" Color="#2E8CFF" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIGeneralPointerover" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#C235DB" />
+        <GradientStop Offset="0.3" Color="#8636DB" />
+        <GradientStop Offset="0.6" Color="#584DDB" />
+        <GradientStop Offset="1.0" Color="#2172DB" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIGeneralActive" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#9D27B8" />
+        <GradientStop Offset="0.3" Color="#6928B8" />
+        <GradientStop Offset="0.6" Color="#473BB8" />
+        <GradientStop Offset="1.0" Color="#1659B8" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIGeneralDisabled" StartPoint="99%,93%" EndPoint="1%,7%">
+        <GradientStop Offset="0.0" Color="#FEB5FF" />
+        <GradientStop Offset="0.3" Color="#E3B5FF" />
+        <GradientStop Offset="0.6" Color="#C1C0FF" />
+        <GradientStop Offset="1.0" Color="#ABD5FF" />
+    </LinearGradientBrush>
+
+    <!-- AI Purple -->
+    <SolidColorBrush x:Key="SemiColorAIPurple" Color="{StaticResource SemiAIPurple5Color}" />
+    <SolidColorBrush x:Key="SemiColorAIPurplePointerover" Color="{StaticResource SemiAIPurple6Color}" />
+    <SolidColorBrush x:Key="SemiColorAIPurpleActive" Color="{StaticResource SemiAIPurple7Color}" />
+    <SolidColorBrush x:Key="SemiColorAIPurpleDisabled" Color="{StaticResource SemiAIPurple2Color}" />
+
+    <!-- AI Background -->
+    <LinearGradientBrush x:Key="SemiColorAIBackgroundBottom" StartPoint="69.35%,0%" EndPoint="30.65%,100%">
+        <GradientStop Offset="0.0658" Color="#0AFFFFFF" />
+        <GradientStop Offset="0.3288" Color="#0AFFE28A" />
+        <GradientStop Offset="0.6793" Color="#0AE72DFF" />
+        <GradientStop Offset="0.9423" Color="#0A0073FF" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIBackgroundBottomPointerover" StartPoint="69.35%,0%" EndPoint="30.65%,100%">
+        <GradientStop Offset="0.0658" Color="#14FFFFFF" />
+        <GradientStop Offset="0.3288" Color="#14FFE28A" />
+        <GradientStop Offset="0.6793" Color="#14E72DFF" />
+        <GradientStop Offset="0.9423" Color="#140073FF" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIBackgroundBottomActive" StartPoint="69.35%,0%" EndPoint="30.65%,100%">
+        <GradientStop Offset="0.0658" Color="#1EFFFFFF" />
+        <GradientStop Offset="0.3288" Color="#1EFFE28A" />
+        <GradientStop Offset="0.6793" Color="#1EE72DFF" />
+        <GradientStop Offset="0.9423" Color="#1E0073FF" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIBackgroundTop" StartPoint="69.35%,0%" EndPoint="30.65%,100%">
+        <GradientStop Offset="0.0658" Color="#295338FF" />
+        <GradientStop Offset="0.3288" Color="#18B030F0" />
+        <GradientStop Offset="0.5917" Color="#0CE72DFF" />
+        <GradientStop Offset="0.9423" Color="#00FFFFFF" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIBackgroundTopPointerover" StartPoint="69.35%,0%" EndPoint="30.65%,100%">
+        <GradientStop Offset="0.0658" Color="#3D5338FF" />
+        <GradientStop Offset="0.3288" Color="#25B030F0" />
+        <GradientStop Offset="0.5917" Color="#12E72DFF" />
+        <GradientStop Offset="0.9423" Color="#00FFFFFF" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="SemiColorAIBackgroundTopActive" StartPoint="69.35%,0%" EndPoint="30.65%,100%">
+        <GradientStop Offset="0.0658" Color="#525338FF" />
+        <GradientStop Offset="0.3288" Color="#31B030F0" />
+        <GradientStop Offset="0.5917" Color="#18E72DFF" />
+        <GradientStop Offset="0.9423" Color="#00FFFFFF" />
+    </LinearGradientBrush>
+
    <!--  Text and Icons  -->
    <SolidColorBrush x:Key="SemiColorText0" Color="{StaticResource SemiGrey9Color}" />
    <SolidColorBrush x:Key="SemiColorText1" Opacity="0.8" Color="{StaticResource SemiGrey9Color}" />