Design Tokens

Flowery.NET uses centralized design tokens to ensure consistent sizing across all controls. These tokens are defined in Themes/DaisyTokens.axaml and can be overridden in your application to customize the entire design system.

Overview

Design tokens provide a single source of truth for:

• Control Heights - Standard heights for buttons, inputs, selects
• Font Sizes - Typography scale across controls
• Corner Radius - Rounded corners for controls
• Padding - Internal spacing for different control types
• Spacing - Layout spacing values
• Border Thickness - Standard border widths

How to Override Tokens

Add your overrides in App.axaml before the DaisyUITheme. These will take precedence:

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:daisy="clr-namespace:Flowery.Controls;assembly=Flowery.NET"
             xmlns:sys="clr-namespace:System;assembly=mscorlib">

    <Application.Resources>
        <!-- Override to make all "Small" controls more compact -->
        <sys:Double x:Key="DaisySizeSmallHeight">28</sys:Double>
        <sys:Double x:Key="DaisySizeSmallFontSize">11</sys:Double>
        <Thickness x:Key="DaisyButtonSmallPadding">10,0</Thickness>
    </Application.Resources>

    <Application.Styles>
        <daisy:DaisyUITheme />
    </Application.Styles>
</Application>

Token Reference

Control Heights

Used for buttons, inputs, selects, and other fixed-height controls.

Floating Input Heights

Specific heights for DaisyInput with LabelPosition="Floating". These add headroom for the label to float above the input border.

Font Sizes

#### Primary Font Sizes

Typography scale used across controls for main content.

#### Secondary Font Sizes

For hint text, helper text, captions, labels (~0.8x of primary).

#### Tertiary Font Sizes

For very small captions, counters (~0.7x of primary).

#### Header Font Sizes

For section titles and headings (~1.4x of primary).

#### Responsive Font Attached Property

Use FlowerySizeManager.ResponsiveFont attached property to make TextBlocks respond to global size changes. This subscribes to the SizeChanged event and updates font sizes programmatically.

<TextBlock Text="Description text" controls:FlowerySizeManager.ResponsiveFont="Primary" />
<TextBlock Text="Secondary hint" controls:FlowerySizeManager.ResponsiveFont="Secondary" />
<TextBlock Text="Section Title" controls:FlowerySizeManager.ResponsiveFont="Header" FontWeight="Bold" />

> Note: DynamicResource bindings to font size tokens don't update reliably due to Avalonia's nested resource scoping. Use the ResponsiveFont attached property instead for text that should scale with global size.

Corner Radius

Rounded corners for controls.

Button Padding

Horizontal-only padding (vertical is controlled by MinHeight).

Input Padding

Horizontal-only padding for text inputs.

Tab Padding

Both horizontal and vertical padding (tabs don't use fixed height).

Badge Tokens

Badges use a separate, more compact scale.

Card Padding

Spacing

General spacing values for layouts.

Border Thickness

Controls Using Tokens

The following controls use design tokens for consistent sizing:

• DaisyButton - Heights, font sizes, padding, corner radius
• DaisyInput - Heights, font sizes, padding, corner radius
• DaisySelect - Heights, font sizes, corner radius
• DaisyNumericUpDown - Heights, font sizes, corner radius
• DaisyTabs - Font sizes, padding, corner radius
• DaisyBadge - Badge-specific heights, font sizes, padding
• DaisyFileInput - Heights, font sizes, corner radius
• DaisyCheckBox - Indicator sizes, checkmark sizes
• DaisyRadio - Indicator sizes, inner dot sizes
• DaisyToggle - Switch dimensions, knob sizes
• DaisyProgress - Bar heights, corner radius
• DaisyAvatar - Avatar dimensions
• DaisyMenu - Item padding, font sizes
• DaisyKbd - Heights, padding, font sizes, corner radius
• DaisyTextArea - MinHeight, padding (multiline-specific)
• DaisyDateTimeline - Item heights, padding, corner radius, font sizes
• DaisyNumberFlow - LargeDisplay tokens (element sizes, buttons, container)

Checkbox/Radio Indicator Sizes

Outer border size for checkboxes and radio buttons.

Checkmark Icon Sizes

Radio Inner Dot Sizes

Toggle Switch Sizes

Toggle Knob Sizes

Progress Bar Heights

Progress Corner Radius

Avatar Sizes

Menu Item Padding

Menu Font Sizes

Kbd (Keyboard) Heights

Kbd Padding

Kbd Font Sizes

Kbd Corner Radius

TextArea MinHeight

TextArea Padding

Input/TextArea Vertical Alignment

DateTimeline Item Heights

DateTimeline Item Widths

DateTimeline Item Padding

DateTimeline Corner Radius

DateTimeline Day Number Font Sizes

DateTimeline Day Name Font Sizes

DateTimeline Month Name Font Sizes

DateTimeline Header Font Sizes

Large Display Tokens

Tokens for dashboard-style display controls like DaisyNumberFlow, counters, and statistics displays. These are "bigger than normal" controls meant for prominent numeric displays.

Display Element (Digit Box) Sizing

Display Control Buttons

Display Container (Outer Wrapper)

Controls Using LargeDisplay Tokens

• DaisyNumberFlow - Animated number display control