Merge pull request #2 from irihitech/typography

feat: add typography related themes.
This commit is contained in:
Dong Bin 2022-12-10 00:53:25 +08:00 committed by GitHub
commit 7099378e59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 352 additions and 0 deletions

View File

@ -5,6 +5,9 @@
Title="Semi.Demo" d:DesignHeight="450"
d:DesignWidth="800" mc:Ignorable="d">
<TabControl TabStripPlacement="Left">
<TabItem Header="TextBlock">
<pages:TextBlockDemo />
</TabItem>
<TabItem Header="Button">
<pages:ButtonDemo />
</TabItem>

View File

@ -0,0 +1,76 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.TextBlockDemo" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="600"
d:DesignWidth="800" mc:Ignorable="d">
<StackPanel Orientation="Horizontal">
<StackPanel
Margin="20" HorizontalAlignment="Left"
Spacing="5">
<TextBlock>Styles for TextBlock</TextBlock>
<TextBlock Classes="H1" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
<TextBlock Classes="H2" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
<TextBlock Classes="H3" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
<TextBlock Classes="H4" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
<TextBlock Classes="H5" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
<TextBlock Classes="H6" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
<TextBlock>Text</TextBlock>
<TextBlock Classes="Secondary">Secondary</TextBlock>
<TextBlock Classes="Tertiary">Tertiary</TextBlock>
<TextBlock Classes="Quaternary">Quaternary</TextBlock>
<TextBlock Classes="Warning">Warning</TextBlock>
<TextBlock Classes="Danger">Danger</TextBlock>
<TextBlock Classes="Success">Success</TextBlock>
<TextBlock IsEnabled="False">Disabled</TextBlock>
<TextBlock Classes="Mark">Default Mark</TextBlock>
<TextBlock Classes="Underline">Underline</TextBlock>
<TextBlock Classes="Delete">Delete</TextBlock>
</StackPanel>
<StackPanel
Margin="20" HorizontalAlignment="Left"
Spacing="5">
<TextBlock>Styles for SelectableTextBlock</TextBlock>
<SelectableTextBlock Classes="H1" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
<SelectableTextBlock Classes="H2" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
<SelectableTextBlock Classes="H3" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
<SelectableTextBlock Classes="H4" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
<SelectableTextBlock Classes="H5" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
<SelectableTextBlock Classes="H6" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
<SelectableTextBlock>Text</SelectableTextBlock>
<SelectableTextBlock Classes="Secondary">Secondary</SelectableTextBlock>
<SelectableTextBlock Classes="Tertiary">Tertiary</SelectableTextBlock>
<SelectableTextBlock Classes="Quaternary">Quaternary</SelectableTextBlock>
<SelectableTextBlock Classes="Warning">Warning</SelectableTextBlock>
<SelectableTextBlock Classes="Danger">Danger</SelectableTextBlock>
<SelectableTextBlock Classes="Success">Success</SelectableTextBlock>
<SelectableTextBlock IsEnabled="False">Disabled</SelectableTextBlock>
<SelectableTextBlock Classes="Mark">Default Mark</SelectableTextBlock>
<SelectableTextBlock Classes="Underline">Underline</SelectableTextBlock>
<SelectableTextBlock Classes="Delete">Delete</SelectableTextBlock>
</StackPanel>
<StackPanel
Margin="20" HorizontalAlignment="Left"
Spacing="5">
<TextBlock>Styles for Label</TextBlock>
<Label Classes="H1" Theme="{StaticResource TitleLabel}">Header 1</Label>
<Label Classes="H2" Theme="{StaticResource TitleLabel}">Header 1</Label>
<Label Classes="H3" Theme="{StaticResource TitleLabel}">Header 1</Label>
<Label Classes="H4" Theme="{StaticResource TitleLabel}">Header 1</Label>
<Label Classes="H5" Theme="{StaticResource TitleLabel}">Header 1</Label>
<Label Classes="H6" Theme="{StaticResource TitleLabel}">Header 1</Label>
<Label>Text</Label>
<Label Classes="Secondary">Secondary</Label>
<Label Classes="Tertiary">Tertiary</Label>
<Label Classes="Quaternary">Quaternary</Label>
<Label Classes="Warning">Warning</Label>
<Label Classes="Danger">Danger</Label>
<Label Classes="Success">Success</Label>
<Label IsEnabled="False">Disabled</Label>
<Label Classes="Mark">Default Mark</Label>
<Label Classes="Code">Example Code</Label>
</StackPanel>
</StackPanel>
</UserControl>

View File

@ -0,0 +1,18 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
namespace Semi.Avalonia.Demo.Pages;
public partial class TextBlockDemo : UserControl
{
public TextBlockDemo()
{
InitializeComponent();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}

View File

@ -3,9 +3,12 @@
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/RadioButton.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/SelectableTextBlock.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TabControl.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/UserControl.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Window.axaml" />
</ResourceDictionary.MergedDictionaries>

View File

@ -0,0 +1,81 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTheme x:Key="{x:Type Label}" TargetType="Label">
<Setter Property="Label.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
<Setter Property="Label.FontSize" Value="{DynamicResource TextBlockFontSize}" />
<Setter Property="Template">
<ControlTemplate TargetType="Label">
<ContentPresenter
Name="PART_ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}"
FontSize="{TemplateBinding FontSize}"
RecognizesAccessKey="True" />
</ControlTemplate>
</Setter>
<Style Selector="^:disabled">
<Setter Property="Label.Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
</Style>
<Style Selector="^.Secondary">
<Setter Property="Label.Foreground" Value="{DynamicResource TextBlockSecondaryForeground}" />
</Style>
<Style Selector="^.Tertiary">
<Setter Property="Label.Foreground" Value="{DynamicResource TextBlockTertiaryForeground}" />
</Style>
<Style Selector="^.Quaternary">
<Setter Property="Label.Foreground" Value="{DynamicResource TextBlockQuaternaryForeground}" />
</Style>
<Style Selector="^.Warning">
<Setter Property="Label.Foreground" Value="{DynamicResource TextBlockWarningForeground}" />
</Style>
<Style Selector="^.Danger">
<Setter Property="Label.Foreground" Value="{DynamicResource TextBlockDangerForeground}" />
</Style>
<Style Selector="^.Success">
<Setter Property="Label.Foreground" Value="{DynamicResource TextBlockSuccessForeground}" />
</Style>
<Style Selector="^.Mark">
<Setter Property="Label.Background" Value="{DynamicResource TextBlockMarkBackground}" />
</Style>
<Style Selector="^.Code">
<Setter Property="Label.Background" Value="{DynamicResource TextBlockCodeBackground}" />
<Setter Property="Label.Foreground" Value="{DynamicResource TextBlockCodeForeground}" />
<Setter Property="Label.BorderBrush" Value="{DynamicResource TextBlockCodeBorderBrush}" />
<Setter Property="Label.BorderThickness" Value="1" />
<Setter Property="Label.Padding" Value="2" />
<Setter Property="Label.CornerRadius" Value="{DynamicResource TextBlockCodeCornerRadius}" />
<Setter Property="Label.FontFamily" Value="{DynamicResource CodeFontFamily}" />
<Setter Property="Label.FontSize" Value="{DynamicResource TextBlockCodeFontSize}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="TitleLabel"
BasedOn="{StaticResource {x:Type Label}}"
TargetType="Label">
<Setter Property="Label.FontWeight" Value="{DynamicResource TextBlockTitleFontWeight}" />
<Style Selector="^.H1">
<Setter Property="Label.FontSize" Value="{DynamicResource TextBlockTitleH1FontSize}" />
</Style>
<Style Selector="^.H2">
<Setter Property="Label.FontSize" Value="{DynamicResource TextBlockTitleH2FontSize}" />
</Style>
<Style Selector="^.H3">
<Setter Property="Label.FontSize" Value="{DynamicResource TextBlockTitleH3FontSize}" />
</Style>
<Style Selector="^.H4">
<Setter Property="Label.FontSize" Value="{DynamicResource TextBlockTitleH4FontSize}" />
</Style>
<Style Selector="^.H5">
<Setter Property="Label.FontSize" Value="{DynamicResource TextBlockTitleH5FontSize}" />
</Style>
<Style Selector="^.H6">
<Setter Property="Label.FontSize" Value="{DynamicResource TextBlockTitleH6FontSize}" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@ -0,0 +1,62 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTheme x:Key="{x:Type SelectableTextBlock}" TargetType="SelectableTextBlock">
<Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
<Setter Property="SelectableTextBlock.FontSize" Value="{DynamicResource TextBlockFontSize}" />
<Setter Property="SelectableTextBlock.Cursor" Value="Ibeam" />
<Setter Property="SelectableTextBlock.SelectionBrush" Value="{DynamicResource TextBlockSelectionBackground}" />
<Style Selector="^:disabled">
<Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
</Style>
<Style Selector="^.Secondary">
<Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockSecondaryForeground}" />
</Style>
<Style Selector="^.Tertiary">
<Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockTertiaryForeground}" />
</Style>
<Style Selector="^.Quaternary">
<Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockQuaternaryForeground}" />
</Style>
<Style Selector="^.Warning">
<Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockWarningForeground}" />
</Style>
<Style Selector="^.Danger">
<Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockDangerForeground}" />
</Style>
<Style Selector="^.Success">
<Setter Property="SelectableTextBlock.Foreground" Value="{DynamicResource TextBlockSuccessForeground}" />
</Style>
<Style Selector="^.Mark">
<Setter Property="SelectableTextBlock.Background" Value="{DynamicResource TextBlockMarkBackground}" />
</Style>
<Style Selector="^.Underline">
<Setter Property="SelectableTextBlock.TextDecorations" Value="Underline" />
</Style>
<Style Selector="^.Delete">
<Setter Property="SelectableTextBlock.TextDecorations" Value="StrikeThrough" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="TitleSelectableTextBlock"
BasedOn="{StaticResource {x:Type SelectableTextBlock}}"
TargetType="SelectableTextBlock">
<Setter Property="SelectableTextBlock.FontWeight" Value="{DynamicResource TextBlockTitleFontWeight}" />
<Style Selector="^.H1">
<Setter Property="SelectableTextBlock.FontSize" Value="{DynamicResource TextBlockTitleH1FontSize}" />
</Style>
<Style Selector="^.H2">
<Setter Property="SelectableTextBlock.FontSize" Value="{DynamicResource TextBlockTitleH2FontSize}" />
</Style>
<Style Selector="^.H3">
<Setter Property="SelectableTextBlock.FontSize" Value="{DynamicResource TextBlockTitleH3FontSize}" />
</Style>
<Style Selector="^.H4">
<Setter Property="SelectableTextBlock.FontSize" Value="{DynamicResource TextBlockTitleH4FontSize}" />
</Style>
<Style Selector="^.H5">
<Setter Property="SelectableTextBlock.FontSize" Value="{DynamicResource TextBlockTitleH5FontSize}" />
</Style>
<Style Selector="^.H6">
<Setter Property="SelectableTextBlock.FontSize" Value="{DynamicResource TextBlockTitleH6FontSize}" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@ -0,0 +1,65 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<StackPanel Spacing="20">
<TextBlock Theme="{StaticResource TitleText}" />
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type TextBlock}" TargetType="TextBlock">
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
<Setter Property="TextBlock.FontSize" Value="{DynamicResource TextBlockFontSize}" />
<Style Selector="^:disabled">
<Setter Property="Label.Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
</Style>
<Style Selector="^.Secondary">
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockSecondaryForeground}" />
</Style>
<Style Selector="^.Tertiary">
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockTertiaryForeground}" />
</Style>
<Style Selector="^.Quaternary">
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockQuaternaryForeground}" />
</Style>
<Style Selector="^.Warning">
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockWarningForeground}" />
</Style>
<Style Selector="^.Danger">
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockDangerForeground}" />
</Style>
<Style Selector="^.Success">
<Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockSuccessForeground}" />
</Style>
<Style Selector="^.Mark">
<Setter Property="TextBlock.Background" Value="{DynamicResource TextBlockMarkBackground}" />
</Style>
<Style Selector="^.Underline">
<Setter Property="TextBlock.TextDecorations" Value="Underline" />
</Style>
<Style Selector="^.Delete">
<Setter Property="TextBlock.TextDecorations" Value="StrikeThrough" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="TitleTextBlock"
BasedOn="{StaticResource {x:Type TextBlock}}"
TargetType="TextBlock">
<Setter Property="TextBlock.FontWeight" Value="{DynamicResource TextBlockTitleFontWeight}" />
<Style Selector="^.H1">
<Setter Property="TextBlock.FontSize" Value="{DynamicResource TextBlockTitleH1FontSize}" />
</Style>
<Style Selector="^.H2">
<Setter Property="TextBlock.FontSize" Value="{DynamicResource TextBlockTitleH2FontSize}" />
</Style>
<Style Selector="^.H3">
<Setter Property="TextBlock.FontSize" Value="{DynamicResource TextBlockTitleH3FontSize}" />
</Style>
<Style Selector="^.H4">
<Setter Property="TextBlock.FontSize" Value="{DynamicResource TextBlockTitleH4FontSize}" />
</Style>
<Style Selector="^.H5">
<Setter Property="TextBlock.FontSize" Value="{DynamicResource TextBlockTitleH5FontSize}" />
</Style>
<Style Selector="^.H6">
<Setter Property="TextBlock.FontSize" Value="{DynamicResource TextBlockTitleH6FontSize}" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@ -4,4 +4,5 @@
<!-- Add Resources Here -->
<sys:Double x:Key="DefaultFontSize">14</sys:Double>
<FontFamily x:Key="DefaultFontFamily">Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif</FontFamily>
<FontFamily x:Key="CodeFontFamily">Cascadia Code, Consolas, Inconsolata, monospace</FontFamily>
</ResourceDictionary>

View File

@ -5,6 +5,7 @@
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Button.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/RadioButton.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

View File

@ -0,0 +1,42 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=System.Runtime">
<SolidColorBrush x:Key="TextBlockDefaultForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="TextBlockSecondaryForeground" Opacity="0.8" Color="#1C1F23" />
<SolidColorBrush x:Key="TextBlockTertiaryForeground" Opacity="0.62" Color="#1C1F23" />
<SolidColorBrush x:Key="TextBlockQuaternaryForeground" Opacity="0.35" Color="#1C1F23" />
<SolidColorBrush x:Key="TextBlockWarningForeground" Color="#FC8800" />
<SolidColorBrush x:Key="TextBlockDangerForeground" Color="#F93920" />
<SolidColorBrush x:Key="TextBlockSuccessForeground" Color="#3BB346" />
<SolidColorBrush x:Key="TextBlockDisabledForeground" Opacity="0.35" Color="#1C1F23" />
<SolidColorBrush x:Key="TextBlockCodeForeground" Opacity="0.68" Color="#1C1F23" />
<SolidColorBrush x:Key="TextBlockMarkBackground" Color="#EAF5FF" />
<SolidColorBrush x:Key="TextBlockCodeBackground" Opacity="0.1" Color="#2E3238" />
<SolidColorBrush x:Key="TextBlockCodeBorderBrush" Opacity="0.2" Color="#2E3238" />
<SolidColorBrush x:Key="TextBlockSelectionBackground" Opacity="0.2" Color="#0077FA" />
<sys:Double x:Key="TextBlockCodeFontSize">12</sys:Double>
<sys:Double x:Key="TextBlockFontSize">14</sys:Double>
<sys:Double x:Key="TextBlockTitleH1FontSize">32</sys:Double>
<sys:Double x:Key="TextBlockTitleH2FontSize">28</sys:Double>
<sys:Double x:Key="TextBlockTitleH3FontSize">24</sys:Double>
<sys:Double x:Key="TextBlockTitleH4FontSize">20</sys:Double>
<sys:Double x:Key="TextBlockTitleH5FontSize">18</sys:Double>
<sys:Double x:Key="TextBlockTitleH6FontSize">16</sys:Double>
<FontWeight x:Key="TextBlockFontWeight">400</FontWeight>
<FontWeight x:Key="TextBlockTitleFontWeight">600</FontWeight>
<FontWeight x:Key="TextBlockLinkFontWeight">600</FontWeight>
<FontWeight x:Key="TextBlockStrongFontWeight">600</FontWeight>
<Thickness x:Key="TextBlockTitleH1Margin">0</Thickness>
<Thickness x:Key="TextBlockTitleH2Margin">0</Thickness>
<Thickness x:Key="TextBlockTitleH3Margin">0</Thickness>
<Thickness x:Key="TextBlockTitleH4Margin">0</Thickness>
<Thickness x:Key="TextBlockTitleH5Margin">0</Thickness>
<Thickness x:Key="TextBlockTitleH6Margin">0</Thickness>
<Thickness x:Key="TextBlockParagraphMargin">0</Thickness>
<Thickness x:Key="TextBlockCodeBorder">1</Thickness>
<CornerRadius x:Key="TextBlockCodeCornerRadius">2</CornerRadius>
</ResourceDictionary>