zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add color group control.

Browse Source
This commit is contained in:
rabbitism 2023-02-13 02:17:38 +08:00
parent 235865c925
commit b06e7c6443
7 changed files with 294 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demo/Semi.Avalonia.Demo/Controls/ColorItemControl.axaml
View File

@ -15,7 +15,8 @@
<Border
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}">
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}">
<Panel>
<TextBlock
Padding="8"

89
demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.axaml Normal file
View File

@ -0,0 +1,89 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels">
<!-- Add Resources Here -->
<ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
<!-- Add Resources Here -->
<Setter Property="controls:FunctionalColorGroupControl.Template">
<ControlTemplate x:DataType="viewModels:FunctionalColorGroupViewModel" TargetType="controls:FunctionalColorGroupControl">
<Grid RowDefinitions="Auto, *">
<TextBlock
Grid.Row="0"
Margin="0,16,0,0"
Classes="H3"
Text="{TemplateBinding Title}"
Theme="{DynamicResource TitleTextBlock}" />
<TabControl Grid.Row="1">
<TabItem Header="Light">
<DataGrid IsReadOnly="True" Items="{TemplateBinding LightColors}">
<DataGrid.Columns>
<DataGridTemplateColumn Header="ResourceKey">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<SelectableTextBlock VerticalAlignment="Center" Text="{Binding ResourceKey}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn
Binding="{Binding ColorDisplayName}"
CanUserSort="False"
Header="Name" />
<DataGridTemplateColumn Header="Color">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<controls:ColorItemControl
Width="40"
Height="20"
Background="{Binding Brush}"
CornerRadius="3" />
<SelectableTextBlock
Margin="8,0,0,0"
VerticalAlignment="Center"
Text="{Binding Hex}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</TabItem>
<TabItem Header="Dark">
<DataGrid IsReadOnly="True" Items="{TemplateBinding DarkColors}">
<DataGrid.Columns>
<DataGridTemplateColumn Header="ResourceKey">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<SelectableTextBlock VerticalAlignment="Center" Text="{Binding ResourceKey}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Binding="{Binding ColorDisplayName}" Header="Name" />
<DataGridTemplateColumn Header="Color">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<controls:ColorItemControl
Width="40"
Height="20"
Background="{Binding Brush}"
CornerRadius="3" />
<SelectableTextBlock
Margin="8,0,0,0"
VerticalAlignment="Center"
Text="{Binding Hex}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</TabItem>
</TabControl>
</Grid>
</ControlTemplate>
</Setter>
</ControlTheme>
</ResourceDictionary>

38
demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.cs Normal file
View File

@ -0,0 +1,38 @@
using System.Collections;
using Avalonia;
using Avalonia.Controls.Primitives;
namespace Semi.Avalonia.Demo.Controls;
public class FunctionalColorGroupControl: TemplatedControl
{
public static readonly StyledProperty<string?> TitleProperty = AvaloniaProperty.Register<FunctionalColorGroupControl, string?>(
nameof(Title));
public string? Title
{
get => GetValue(TitleProperty);
set => SetValue(TitleProperty, value);
}
public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable> LightColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable>(
nameof(LightColors), o => o.LightColors, (o, v) => o.LightColors = v);
private IEnumerable _lightColors;
public IEnumerable LightColors
{
get => _lightColors;
set => SetAndRaise(LightColorsProperty, ref _lightColors, value);
}
public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable> DarkColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable>(
nameof(DarkColors), o => o.DarkColors, (o, v) => o.DarkColors = v);
private IEnumerable _darkColors;
public IEnumerable DarkColors
{
get => _darkColors;
set => SetAndRaise(DarkColorsProperty, ref _darkColors, value);
}
}

17
demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml
View File

@ -17,6 +17,7 @@
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="../Controls/ColorItemControl.axaml" />
<ResourceInclude Source="../Controls/ColorDetailControl.axaml" />
<ResourceInclude Source="../Controls/FunctionalColorGroupControl.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
@ -51,6 +52,10 @@
<SplitView.Content>
<ScrollViewer>
<StackPanel>
<TextBlock
Classes="H3"
Text="Basic Colors"
Theme="{DynamicResource TitleTextBlock}" />
<TabControl>
<TabItem Header="Light">
<ItemsControl Margin="16" Items="{Binding LightLists}">
@ -101,6 +106,18 @@
</ItemsControl>
</TabItem>
</TabControl>
<ItemsControl Items="{Binding FunctionalColors}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- -->
<controls:FunctionalColorGroupControl
Title="{Binding Title}"
DarkColors="{Binding DarkColors}"
LightColors="{Binding LightColors}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
</SplitView.Content>

63
demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs
View File

@ -1,4 +1,5 @@
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
@ -36,11 +37,14 @@ public class PaletteDemoViewModel: ObservableObject
set => SetProperty(ref _darkLists, value);
}
public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = new();
public PaletteDemoViewModel()
{
_lightResourceDictionary = (ResourceDictionary)AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml"));
_darkResourceDictionary = (ResourceDictionary)AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Dark/Palette.axaml"));
InitializePalette();
InitializeFunctionalColors();
WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
}
@ -62,6 +66,10 @@ public class PaletteDemoViewModel: ObservableObject
}
}
private void InitializeFunctionalColors()
{
FunctionalColors.Add(new FunctionalColorGroupViewModel("Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
}
private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
{
SelectedColor = item;
@ -96,7 +104,7 @@ public class ColorListViewModel: ObservableObject
var key = "Semi" + color + i;
if (resourceDictionary.TryGetValue(key, out var value))
{
if (value is SolidColorBrush brush)
if (value is ISolidColorBrush brush)
{
string name = color + " " + i;
var item = new ColorItemViewModel(name, brush, key, light, i);
@ -147,7 +155,7 @@ public class ColorItemViewModel : ObservableObject
set => SetProperty(ref _hex, value);
}
public ColorItemViewModel(string colorDisplayName, IBrush brush, string resourceKey, bool light, int index)
public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light, int index)
{
ColorDisplayName = colorDisplayName;
Brush = brush;
@ -162,4 +170,55 @@ public class ColorItemViewModel : ObservableObject
TextBrush = Brushes.White;
}
}
}
public class FunctionalColorGroupViewModel : ObservableObject
{
private string _title;
public string Title
{
get => _title;
set => SetProperty(ref _title, value);
}
public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = new();
public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = new();
public FunctionalColorGroupViewModel(string title, IResourceDictionary lightDictionary, IResourceDictionary darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
{
Title = title;
foreach (var token in tokens)
{
string key = token.Item1;
string name = token.Item2;
if (lightDictionary.TryGetValue(key, out var lightValue))
{
if (lightValue is ISolidColorBrush lightBrush)
{
LightColors.Add(new ColorItemViewModel(name, lightBrush, key, true, 0));
}
}
if (darkDictionary.TryGetValue(key, out var darkValue))
{
if (darkValue is ISolidColorBrush darkBrush)
{
DarkColors.Add(new ColorItemViewModel(name, darkBrush, key, true, 0));
}
}
}
}
}
public static class ColorTokens
{
public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
{
new ("SemiColorPrimary", "Primary"),
new ("SemiColorPrimaryPointerover", "Primary Pointerover"),
new ("SemiColorPrimaryPressed", "Primary Pressed"),
new ("SemiColorPrimaryDisabled", "Primary Disabled"),
new ("SemiColorPrimaryLight", "Primary Light"),
new ("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
new ("SemiColorPrimaryLightActive", "Primary Light Active"),
};
}

108
src/Semi.Avalonia/Themes/Dark/Palette.axaml
View File

@ -166,85 +166,85 @@
<SolidColorBrush x:Key="SemiColorPrimaryPointerover" Color="#FF7FC1FF" />
<SolidColorBrush x:Key="SemiColorPrimaryPressed" Color="#FFA9D7FF" />
<SolidColorBrush x:Key="SemiColorPrimaryDisabled" Color="#FF135CB8" />
<SolidColorBrush x:Key="SemiColorPrimaryLight" Color="#FF54A9FF" Opacity="0.2" />
<SolidColorBrush x:Key="SemiColorPrimaryLightPointerover" Color="#FF54A9FF" Opacity="0.3"/>
<SolidColorBrush x:Key="SemiColorPrimaryLightActive" Color="#FF54A9FF" Opacity="0.4"/>
<SolidColorBrush x:Key="SemiColorPrimaryLight" Opacity="0.2" Color="#FF54A9FF" />
<SolidColorBrush x:Key="SemiColorPrimaryLightPointerover" Opacity="0.3" Color="#FF54A9FF" />
<SolidColorBrush x:Key="SemiColorPrimaryLightActive" Opacity="0.4" Color="#FF54A9FF" />
<!-- Secondary -->
<SolidColorBrush x:Key="SemiColorSecondary" Color="#FF40B4F3" />
<SolidColorBrush x:Key="SemiColorSecondaryPointerover" Color="#FF6EC8F6" />
<SolidColorBrush x:Key="SemiColorSecondaryPressed" Color="#FF9DDCF9" />
<SolidColorBrush x:Key="SemiColorSecondaryDisabled" Color="#FF0366A9" />
<SolidColorBrush x:Key="SemiColorSecondaryLight" Color="#FF40B4F3" Opacity="0.2" />
<SolidColorBrush x:Key="SemiColorSecondaryLightPointerover" Color="#FF40B4F3" Opacity="0.3" />
<SolidColorBrush x:Key="SemiColorSecondaryLightActive" Color="#FF40B4F3" Opacity="0.4" />
<SolidColorBrush x:Key="SemiColorSecondaryLight" Opacity="0.2" Color="#FF40B4F3" />
<SolidColorBrush x:Key="SemiColorSecondaryLightPointerover" Opacity="0.3" Color="#FF40B4F3" />
<SolidColorBrush x:Key="SemiColorSecondaryLightActive" Opacity="0.4" Color="#FF40B4F3" />
<!-- Tertiary -->
<SolidColorBrush x:Key="SemiColorTertiary" Color="#FF888D92" />
<SolidColorBrush x:Key="SemiColorTertiaryPointerover" Color="#FFA7ABB0" />
<SolidColorBrush x:Key="SemiColorTertiaryPressed" Color="#FFC6CACD" />
<SolidColorBrush x:Key="SemiColorTertiaryLight" Color="#FF888D92" Opacity="0.2" />
<SolidColorBrush x:Key="SemiColorTertiaryLightPointerover" Color="#FF888D92" Opacity="0.3"/>
<SolidColorBrush x:Key="SemiColorTertiaryLightActive" Color="#FF888D92" Opacity="0.4"/>
<SolidColorBrush x:Key="SemiColorTertiaryLight" Opacity="0.2" Color="#FF888D92" />
<SolidColorBrush x:Key="SemiColorTertiaryLightPointerover" Opacity="0.3" Color="#FF888D92" />
<SolidColorBrush x:Key="SemiColorTertiaryLightActive" Opacity="0.4" Color="#FF888D92" />
<!-- Information -->
<SolidColorBrush x:Key="SemiColorInformation" Color="#FF54A9FF" />
<SolidColorBrush x:Key="SemiColorInformationPointerover" Color="#FF7FC1FF" />
<SolidColorBrush x:Key="SemiColorInformationPressed" Color="#FFA9D7FF" />
<SolidColorBrush x:Key="SemiColorInformationDisabled" Color="#FF135CB8" />
<SolidColorBrush x:Key="SemiColorInformationLight" Color="#FF54A9FF" Opacity="0.2" />
<SolidColorBrush x:Key="SemiColorInformationLightPointerover" Color="#FF54A9FF" Opacity="0.3"/>
<SolidColorBrush x:Key="SemiColorInformationLightActive" Color="#FF54A9FF" Opacity="0.4"/>
<SolidColorBrush x:Key="SemiColorInformationLight" Opacity="0.2" Color="#FF54A9FF" />
<SolidColorBrush x:Key="SemiColorInformationLightPointerover" Opacity="0.3" Color="#FF54A9FF" />
<SolidColorBrush x:Key="SemiColorInformationLightActive" Opacity="0.4" Color="#FF54A9FF" />
<!-- Success -->
<SolidColorBrush x:Key="SemiColorSuccess" Color="#FF5DC264" />
<SolidColorBrush x:Key="SemiColorSuccessPointerover" Color="#FF7FD184" />
<SolidColorBrush x:Key="SemiColorSuccessPressed" Color="#FFA6E1A8" />
<SolidColorBrush x:Key="SemiColorSuccessDisabled" Color="#FF277731" />
<SolidColorBrush x:Key="SemiColorSuccessLight" Color="#FF5DC264" Opacity="0.2"/>
<SolidColorBrush x:Key="SemiColorSuccessLightPointerover" Color="#FF5DC264" Opacity="0.3"/>
<SolidColorBrush x:Key="SemiColorSuccessLightActive" Color="#FF5DC264" Opacity="0.4"/>
<SolidColorBrush x:Key="SemiColorSuccessLight" Opacity="0.2" Color="#FF5DC264" />
<SolidColorBrush x:Key="SemiColorSuccessLightPointerover" Opacity="0.3" Color="#FF5DC264" />
<SolidColorBrush x:Key="SemiColorSuccessLightActive" Opacity="0.4" Color="#FF5DC264" />
<!-- Warning -->
<SolidColorBrush x:Key="SemiColorWarning" Color="#FFFFAE43" />
<SolidColorBrush x:Key="SemiColorWarningPointerover" Color="#FFFFC772" />
<SolidColorBrush x:Key="SemiColorWarningPressed" Color="#FFFFDDA1" />
<SolidColorBrush x:Key="SemiColorWarningLight" Color="#FFFFAE43" Opacity="0.2" />
<SolidColorBrush x:Key="SemiColorWarningLightPointerover" Color="#FFFFAE43" Opacity="0.3"/>
<SolidColorBrush x:Key="SemiColorWarningLightActive" Color="#FFFFAE43" Opacity="0.4"/>
<SolidColorBrush x:Key="SemiColorWarningLight" Opacity="0.2" Color="#FFFFAE43" />
<SolidColorBrush x:Key="SemiColorWarningLightPointerover" Opacity="0.3" Color="#FFFFAE43" />
<SolidColorBrush x:Key="SemiColorWarningLightActive" Opacity="0.4" Color="#FFFFAE43" />
<!-- Danger -->
<SolidColorBrush x:Key="SemiColorDanger" Color="#FFFC725A" />
<SolidColorBrush x:Key="SemiColorDangerPointerover" Color="#FFFD9983" />
<SolidColorBrush x:Key="SemiColorDangerPressed" Color="#FFFDBEAC" />
<SolidColorBrush x:Key="SemiColorDangerLight" Color="#FFFC725A" Opacity="0.2" />
<SolidColorBrush x:Key="SemiColorDangerLightPointerover" Color="#FFFC725A" Opacity="0.3" />
<SolidColorBrush x:Key="SemiColorDangerLightActive" Color="#FFFC725A" Opacity="0.4"/>
<!-- Text and Icons--->
<SolidColorBrush x:Key="SemiColorText0" Color="#FFF9F9F9"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorText1" Color="#FFF9F9F9" Opacity="0.8"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorText2" Color="#FFF9F9F9" Opacity="0.6"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorText3" Color="#FFF9F9F9" Opacity="0.35"></SolidColorBrush>
<!-- Link -->
<SolidColorBrush x:Key="SemiColorLink" Color="#FF54A9FF"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorLinkPointerover" Color="#FF7FC1FF"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorLinkActive" Color="#FFA9D7FF"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorLinkVisited" Color="#FF54A9FF"></SolidColorBrush>
<!-- Background -->
<SolidColorBrush x:Key="SemiColorBackground0" Color="#FF16161A"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorBackground1" Color="#FF232429"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorBackground2" Color="#FF35363C"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorBackground3" Color="#FF43444A"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorBackground4" Color="#FF4F5159"></SolidColorBrush>
<!-- Fill -->
<SolidColorBrush x:Key="SemiColorFill0" Color="White" Opacity="0.12"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorFill1" Color="White" Opacity="0.16"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorFill2" Color="White" Opacity="0.20"></SolidColorBrush>
<!-- Border -->
<SolidColorBrush x:Key="SemiColorBorder" Color="White" Opacity="0.08"></SolidColorBrush>
<!-- Disabled -->
<SolidColorBrush x:Key="SemiColorDisabledText" Color="#FFF9F9F9" Opacity="0.35"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorDisabledBorder" Color="#FF2E3238"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorDisabledBackground" Color="#FF2E3238"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorDisabledFill" Color="#FFE6E8EA" Opacity="0.04"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorDangerLight" Opacity="0.2" Color="#FFFC725A" />
<SolidColorBrush x:Key="SemiColorDangerLightPointerover" Opacity="0.3" Color="#FFFC725A" />
<SolidColorBrush x:Key="SemiColorDangerLightActive" Opacity="0.4" Color="#FFFC725A" />
<!-- Text and Icons -->
<SolidColorBrush x:Key="SemiColorText0" Color="#FFF9F9F9" />
<SolidColorBrush x:Key="SemiColorText1" Opacity="0.8" Color="#FFF9F9F9" />
<SolidColorBrush x:Key="SemiColorText2" Opacity="0.6" Color="#FFF9F9F9" />
<SolidColorBrush x:Key="SemiColorText3" Opacity="0.35" Color="#FFF9F9F9" />
<!-- Link -->
<SolidColorBrush x:Key="SemiColorLink" Color="#FF54A9FF" />
<SolidColorBrush x:Key="SemiColorLinkPointerover" Color="#FF7FC1FF" />
<SolidColorBrush x:Key="SemiColorLinkActive" Color="#FFA9D7FF" />
<SolidColorBrush x:Key="SemiColorLinkVisited" Color="#FF54A9FF" />
<!-- Background -->
<SolidColorBrush x:Key="SemiColorBackground0" Color="#FF16161A" />
<SolidColorBrush x:Key="SemiColorBackground1" Color="#FF232429" />
<SolidColorBrush x:Key="SemiColorBackground2" Color="#FF35363C" />
<SolidColorBrush x:Key="SemiColorBackground3" Color="#FF43444A" />
<SolidColorBrush x:Key="SemiColorBackground4" Color="#FF4F5159" />
<!-- Fill -->
<SolidColorBrush x:Key="SemiColorFill0" Opacity="0.12" Color="White" />
<SolidColorBrush x:Key="SemiColorFill1" Opacity="0.16" Color="White" />
<SolidColorBrush x:Key="SemiColorFill2" Opacity="0.20" Color="White" />
<!-- Border -->
<SolidColorBrush x:Key="SemiColorBorder" Opacity="0.08" Color="White" />
<!-- Disabled -->
<SolidColorBrush x:Key="SemiColorDisabledText" Opacity="0.35" Color="#FFF9F9F9" />
<SolidColorBrush x:Key="SemiColorDisabledBorder" Color="#FF2E3238" />
<SolidColorBrush x:Key="SemiColorDisabledBackground" Color="#FF2E3238" />
<SolidColorBrush x:Key="SemiColorDisabledFill" Opacity="0.04" Color="#FFE6E8EA" />
</ResourceDictionary>

66
src/Semi.Avalonia/Themes/Light/Palette.axaml
View File

@ -214,37 +214,37 @@
<SolidColorBrush x:Key="SemiColorDangerLight" Color="#FFFEF2ED" />
<SolidColorBrush x:Key="SemiColorDangerLightPointerover" Color="#FFFEDDD2" />
<SolidColorBrush x:Key="SemiColorDangerLightActive" Color="#FFFDB7A5" />
<!-- Text and Icons--->
<SolidColorBrush x:Key="SemiColorText0" Color="#FF1C1F23"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorText1" Color="#FF1C1F23" Opacity="0.8"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorText2" Color="#FF1C1F23" Opacity="0.62"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorText3" Color="#FF1C1F23" Opacity="0.35"></SolidColorBrush>
<!-- Link -->
<SolidColorBrush x:Key="SemiColorLink" Color="#FF0077FA"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorLinkPointerover" Color="#FF0062D6"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorLinkActive" Color="#FF004FB3"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorLinkVisited" Color="#FF0077FA"></SolidColorBrush>
<!-- Background -->
<SolidColorBrush x:Key="SemiColorBackground0" Color="White"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorBackground1" Color="White"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorBackground2" Color="White"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorBackground3" Color="White"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorBackground4" Color="White"></SolidColorBrush>
<!-- Fill -->
<SolidColorBrush x:Key="SemiColorFill0" Color="#FF2E3238" Opacity="0.05"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorFill1" Color="#FF2E3238" Opacity="0.09"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorFill2" Color="#FF2E3238" Opacity="0.13"></SolidColorBrush>
<!-- Border -->
<SolidColorBrush x:Key="SemiColorBorder" Color="#FF1C1F23" Opacity="0.08"></SolidColorBrush>
<!-- Disabled -->
<SolidColorBrush x:Key="SemiColorDisabledText" Color="#FF1C1F23" Opacity="0.35"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorDisabledBorder" Color="#FFE6E8EA"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorDisabledBackground" Color="#FFE6E8EA"></SolidColorBrush>
<SolidColorBrush x:Key="SemiColorDisabledFill" Color="#FF2E3238" Opacity="0.04"></SolidColorBrush>
<!-- Text and Icons -->
<SolidColorBrush x:Key="SemiColorText0" Color="#FF1C1F23" />
<SolidColorBrush x:Key="SemiColorText1" Opacity="0.8" Color="#FF1C1F23" />
<SolidColorBrush x:Key="SemiColorText2" Opacity="0.62" Color="#FF1C1F23" />
<SolidColorBrush x:Key="SemiColorText3" Opacity="0.35" Color="#FF1C1F23" />
<!-- Link -->
<SolidColorBrush x:Key="SemiColorLink" Color="#FF0077FA" />
<SolidColorBrush x:Key="SemiColorLinkPointerover" Color="#FF0062D6" />
<SolidColorBrush x:Key="SemiColorLinkActive" Color="#FF004FB3" />
<SolidColorBrush x:Key="SemiColorLinkVisited" Color="#FF0077FA" />
<!-- Background -->
<SolidColorBrush x:Key="SemiColorBackground0" Color="White" />
<SolidColorBrush x:Key="SemiColorBackground1" Color="White" />
<SolidColorBrush x:Key="SemiColorBackground2" Color="White" />
<SolidColorBrush x:Key="SemiColorBackground3" Color="White" />
<SolidColorBrush x:Key="SemiColorBackground4" Color="White" />
<!-- Fill -->
<SolidColorBrush x:Key="SemiColorFill0" Opacity="0.05" Color="#FF2E3238" />
<SolidColorBrush x:Key="SemiColorFill1" Opacity="0.09" Color="#FF2E3238" />
<SolidColorBrush x:Key="SemiColorFill2" Opacity="0.13" Color="#FF2E3238" />
<!-- Border -->
<SolidColorBrush x:Key="SemiColorBorder" Opacity="0.08" Color="#FF1C1F23" />
<!-- Disabled -->
<SolidColorBrush x:Key="SemiColorDisabledText" Opacity="0.35" Color="#FF1C1F23" />
<SolidColorBrush x:Key="SemiColorDisabledBorder" Color="#FFE6E8EA" />
<SolidColorBrush x:Key="SemiColorDisabledBackground" Color="#FFE6E8EA" />
<SolidColorBrush x:Key="SemiColorDisabledFill" Opacity="0.04" Color="#FF2E3238" />
</ResourceDictionary>