Irihi.Mafia.Themes.TDesign

IRIHI Mafia

English | 中文

This project is in early development and not yet ready for production use. APIs, controls, and themes may change significantly between releases. Use at your own risk.

Mobile-first Avalonia UI control library and TDesign-inspired theme.

Irihi.Mafia is a mobile-first Avalonia control library — crafted for touch interactions, thumb-friendly sizing, and responsive layouts from the ground up. It also provides a complete visual theme based on TDesign design language, with full light/dark mode support.

Features

• 📱 Mobile-first design — Touch-optimized controls, generous tap targets, thumb-friendly spacing
• 🎨 TDesign-inspired theme — A comprehensive light & dark theme with design token system (colors, typography, spacing, radius)
• 🧩 Custom controls — Avatar, Cell/ CellGroup, Divider, IconButton, Picker, Popup and more
• 🌓 Light/Dark mode — Built-in theme variants with consistent color palettes
• 📦 Modular packages — Core logic library and theme library are separate NuGet packages
• 🖥️ Cross-platform — Works on Windows, macOS, Linux, Android, iOS and Browser via Avalonia

Packages

Package	Description	NuGet
Irihi.Mafia	Core control library — provides custom control logic & primitives
Irihi.Mafia.Themes.TDesign	TDesign-inspired visual theme — control templates, design tokens, light/dark color schemes

Getting Started

1. Install the packages

dotnet add package Irihi.Mafia
dotnet add package Irihi.Mafia.Themes.TDesign

You only need Irihi.Mafia if you want to write your own theme; for most projects, install both packages.

2. Apply the theme

In your App.axaml, add the TDesign theme:

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:td="https://irihi.tech/td"
             x:Class="MyApp.App">
    <Application.Styles>
        <td:TDesignTheme />
    </Application.Styles>
</Application>

3. Use the controls

xmlns:m="https://irihi.tech/mafia"

<!-- IconButton -->
<m:IconButton Icon="emoji_smile"
              Shape="Circle"
              Variant="Outline" />

<!-- Cell -->
<m:Cell Description="User settings"
        Note="Manage your preferences"
        IsRequired="True" />

<!-- Avatar -->
<m:Avatar Width="40" Height="40"
          Source="{Binding ProfileImage}" />

Controls Overview

Many more controls are still in design and development. The current list represents only what has been implemented so far.

Project Structure

src/
├── Irihi.Mafia/                      # Core control library
│   ├── Controls/                     # Custom control implementations
│   │   ├── Avatar/
│   │   ├── Cell/
│   │   ├── Divider.cs
│   │   ├── IconButton.cs
│   │   ├── Picker.cs
│   │   └── Primitives/               # Popup, OverlayPopupHost
│   └── Common/                       # Shared enums (Position, PopupPlacement)
│
└── Irihi.Mafia.Themes.TDesign/       # TDesign-themed visual library
    ├── TDesignTheme.axaml             # Theme entry point
    ├── Controls/                      # 24 ControlTheme definitions
    ├── Tokens/                        # Design tokens (colors, fonts, radius, sizes)
    ├── Themes/                        # Light & Dark variant resource dictionaries
    └── Styles/                        # Global style selectors

demo/
├── Irihi.Mafia.Demo/                 # Shared demo application
├── Irihi.Mafia.Demo.Desktop          # Windows/macOS/Linux launcher
├── Irihi.Mafia.Demo.Browser          # WebAssembly launcher
├── Irihi.Mafia.Demo.Android          # Android launcher
└── Irihi.Mafia.Demo.iOS              # iOS launcher

Theme Customization

The TDesign theme uses a layered token system, making customization straightforward:

1. Design tokens (Tokens/) — Atomic values for colors, fonts, radius, and spacing
2. Shared dimensions (Themes/Shared/) — Component-level size and padding references
3. Theme variant (Themes/Light/, Themes/Dark/) — Color mappings per light/dark mode
4. Control templates (Controls/) — Visual tree and bindings for each control

To customize, override any DynamicResource key from your app:

<Application.Resources>
    <SolidColorBrush x:Key="TDBrandColor" Color="#FF5722" />
</Application.Resources>

Build from Source

# Clone the repository
git clone https://github.com/irihitech/Irihi.Mafia.git
cd Irihi.Mafia

# Build
dotnet build

# Run tests
dotnet test

# Run the desktop demo
dotnet run --project demo/Irihi.Mafia.Demo.Desktop

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Copyright (c) 2026 IRIHI Technology