Design Tokens - Flowery.Uno

Flowery.Uno uses centralized design tokens to ensure consistent sizing, spacing, and typography across all controls.

This document covers sizing and layout tokens. For color and brush customization, see the Theming guide.

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

Implementation

Flowery.Uno implements design tokens in C#:

Component	Purpose
`DaisyTokenDefaults.cs`	Ensures default tokens are present in `Application.Current.Resources`
`DaisyResourceLookup.cs`	Provides helper methods to read tokens and get fallback values

How It Works

Controls call DaisyTokenDefaults.EnsureDefaults(resources) on load
This populates Application.Current.Resources with default token values
Controls use DaisyResourceLookup.GetDouble(), GetThickness(), etc. to read tokens
If a token is missing, centralized GetDefault*() methods provide fallbacks

Ensuring Tokens at Startup

If you need token values before any Daisy control loads (e.g., for layout math at app startup), call the public helper:

DesignTokens.md:38-44

using Flowery.Theming;

// App startup (e.g., App.OnLaunched)
DaisyResourceLookup.EnsureTokens();

Programmatic Access

For custom controls or code-behind, use DaisyResourceLookup helper methods:

DesignTokens.md:49-63

using Flowery.Theming;
using Flowery.Controls;

// Get default values based on DaisySize
double height = DaisyResourceLookup.GetDefaultHeight(DaisySize.Medium);        // 28
double fontSize = DaisyResourceLookup.GetDefaultFontSize(DaisySize.Medium);    // 12
Thickness padding = DaisyResourceLookup.GetDefaultPadding(DaisySize.Medium);   // 10,0,10,0
CornerRadius radius = DaisyResourceLookup.GetDefaultCornerRadius(DaisySize.Medium); // 8

// Read from ResourceDictionary with fallback
var resources = Application.Current?.Resources;
double actualHeight = DaisyResourceLookup.GetDouble(resources, "DaisySizeMediumHeight", 28);

Available Helper Methods

Control Sizing

Method	Returns	Description
`GetDefaultHeight(size)`	double	Standard control height (22-36)
`GetDefaultFloatingInputHeight(size)`	double	Taller input height (28-46)
`GetDefaultCornerRadius(size)`	CornerRadius	Rounded corners (4-12)
`GetAvatarSize(size)`	double	Avatar dimensions (20-80)
`GetDefaultOtpSlotSize(size)`	double	OTP input slot size (32-56)

Typography

Method	Returns	Description
`GetDefaultFontSize(size)`	double	Primary font size (9-16)
`GetDefaultHeaderFontSize(size)`	double	Large display font size (12-24)
`GetAvatarFontSize(size)`	double	Avatar placeholder font (7-20)

Spacing & Padding

Method	Returns	Description
`GetDefaultPadding(size)`	Thickness	Horizontal button padding
`GetDefaultMenuPadding(size)`	Thickness	Menu/list item padding
`GetDefaultTagPadding(size)`	Thickness	Tag/chip padding
`GetDefaultIconSpacing(size)`	double	Gap between icon and text (3-8)
`GetDefaultOtpSpacing(size)`	double	OTP slot spacing (4-10)
`GetDefaultRatingSpacing(size)`	double	Rating star gap (2-8)

Icons & Indicators

Method	Returns	Description
`GetDefaultIconSize(size)`	double	Icon dimensions (10-18)
`GetDefaultRatingStarSize(size)`	double	Rating star dimensions (16-40)
`GetDefaultRadialProgressSize(size)`	double	Radial progress dimensions (24-128)
`GetAvatarStatusSize(size)`	double	Status indicator size (5-16)
`GetAvatarIconSize(size)`	double	Avatar icon size (10-34)

Range Controls

Method	Returns	Description
`GetDefaultRangeTrackHeight(size)`	double	Range slider track (4-16)
`GetDefaultRangeThumbSize(size)`	double	Range slider thumb (12-36)

Token Reference

Control Heights

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

Token	XS	S	M	L	XL	Used By
`DaisySize{Size}Height`	22	24	28	32	36	DaisyButton, DaisyInput, DaisySelect

Floating Input Heights

Specific heights for taller input controls like DaisyNumericUpDown and DaisyFileInput.

Token	XS	S	M	L	XL
`DaisyInputFloating{Size}Height`	28	34	38	42	46

Font Sizes

Primary Font Sizes

Typography scale used across controls for main content.

Token	XS	S	M	L	XL
`DaisySize{Size}FontSize`	9	10	12	14	16

Secondary Font Sizes

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

Token	XS	S	M	L	XL
`DaisySize{Size}SecondaryFontSize`	8	9	10	12	14

Tertiary Font Sizes

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

Token	XS	S	M	L	XL
`DaisySize{Size}TertiaryFontSize`	8	8	9	10	12

Section Header Font Sizes

For section titles within pages.

Token	XS	S	M	L	XL
`DaisySize{Size}SectionHeaderFontSize`	10	12	13	15	17

Header Font Sizes

For large display headings (~1.4x of primary).

Token	XS	S	M	L	XL
`DaisySize{Size}HeaderFontSize`	12	14	17	20	24

Corner Radius

Rounded corners for controls.

Token	XS	S	M	L	XL
`DaisySize{Size}CornerRadius`	4	6	8	10	12

Padding

Button Padding

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

Token	XS	S	M	L	XL
`DaisyButton{Size}Padding`	8,0	12,0	14,0	16,0	16,0

Input Padding

Full padding for text inputs.

Token	XS	S	M	L	XL
`DaisyInput{Size}Padding`	8,4	12,5	12,6	14,6	14,7

Tab Padding

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

Token	XS	S	M	L	XL
`DaisyTab{Size}Padding`	10,2	12,4	12,5	12,5	12,5

Badge Tokens

Badges use a separate, more compact scale.

Token	XS	S	M	L
`DaisyBadge{Size}Height`	14	16	20	22
`DaisyBadge{Size}FontSize`	8	9	10	12
`DaisyBadge{Size}Padding`	4,0	6,0	8,0	12,0

Card Padding

Token	Value
`DaisyCardLargePadding`	24
`DaisyCardMediumPadding`	18
`DaisyCardSmallPadding`	12
`DaisyCardCompactPadding`	8

Spacing

General spacing values for layouts.

Token	Value
`DaisySpacingXL`	20
`DaisySpacingLarge`	14
`DaisySpacingMedium`	10
`DaisySpacingSmall`	6
`DaisySpacingXS`	3

Border Thickness

Token	Value
`DaisyBorderThicknessNone`	0
`DaisyBorderThicknessThin`	1
`DaisyBorderThicknessMedium`	2
`DaisyBorderThicknessThick`	3

Checkbox/Radio Indicator Sizes

Outer border size for checkboxes and radio buttons.

Token	XS	S	M	L	XL
`DaisyCheckbox{Size}Size`	12	16	18	24	28

Checkmark Icon Sizes

Token	XS	S	M	L	XL
`DaisyCheckmark{Size}Size`	7	10	12	16	18

Radio Inner Dot Sizes

Token	XS	S	M	L	XL
`DaisyRadioDot{Size}Size`	5	8	10	14	18

Toggle Switch Sizes

Token	XS	S	M	L	XL
`DaisyToggle{Size}Width`	24	28	36	42	48
`DaisyToggle{Size}Height`	14	16	20	24	28

Toggle Knob Sizes

Token	XS	S	M	L	XL
`DaisyToggleKnob{Size}Size`	10	12	16	18	22

Progress Bar Heights

Token	XS	S	M	L
`DaisyProgress{Size}Height`	2	4	8	16

Progress Corner Radius

Token	XS	S	M	L
`DaisyProgress{Size}CornerRadius`	1	2	4	8

Avatar Sizes

Token	XS	S	M	L	XL
`DaisyAvatar{Size}Size`	20	28	40	56	80
`DaisyAvatarStatus{Size}Size`	5	7	10	14	16
`DaisyAvatarFont{Size}Size`	7	9	12	16	20
`DaisyAvatarIcon{Size}Size`	10	14	18	24	34

Making Custom Controls Token-Aware

Pattern 1: Use DaisyResourceLookup (Recommended)

For custom controls, use DaisyResourceLookup methods instead of hardcoded values:

DesignTokens.md:418-435

public class MyCustomControl : ContentControl
{
    public DaisySize Size { get; set; } = DaisySize.Medium;

    private void ApplySizing()
    {
        var resources = Application.Current?.Resources;
        if (resources != null)
            DaisyTokenDefaults.EnsureDefaults(resources);

        // Use centralized defaults - single source of truth
        Height = DaisyResourceLookup.GetDefaultHeight(Size);
        FontSize = DaisyResourceLookup.GetDefaultFontSize(Size);
        Padding = DaisyResourceLookup.GetDefaultPadding(Size);
    }
}

Pattern 2: Read from ResourceDictionary with Fallback

For maximum flexibility (allows token overrides):

DesignTokens.md:441-456

private void ApplySizing()
{
    var resources = Application.Current?.Resources;
    if (resources != null)
        DaisyTokenDefaults.EnsureDefaults(resources);

    string sizeKey = DaisyResourceLookup.GetSizeKeyFull(Size); // "Medium", "Large", etc.

    // Try resource dictionary first, fallback to centralized default
    Height = DaisyResourceLookup.GetDouble(resources, $"DaisySize{sizeKey}Height",
        DaisyResourceLookup.GetDefaultHeight(Size));
    FontSize = DaisyResourceLookup.GetDouble(resources, $"DaisySize{sizeKey}FontSize",
        DaisyResourceLookup.GetDefaultFontSize(Size));
}

Controls Using Tokens

Most Daisy controls use the token system for consistent sizing:

Inputs & Buttons
Form Controls
Display & Feedback
Navigation & Layout
Specialized

DaisyButton - Heights, font sizes, padding, corner radius
DaisyInput - Heights, font sizes, padding, corner radius
DaisySelect - Heights, font sizes, corner radius
DaisyNumericUpDown - Floating heights, font sizes, corner radius
DaisyFileInput - Floating heights, font sizes, corner radius
DaisyTextArea - MinHeight, padding

Best Practices

Use Token Helpers

Always use DaisyResourceLookup.GetDefault*() methods instead of hardcoding pixel values. This ensures consistency and allows for easy theme customization.

Respect Size Property

When creating custom controls, honor the DaisySize enum and use the corresponding token values.

Provide Fallbacks

Always provide fallback values when reading from ResourceDictionary to ensure your controls work even if tokens are missing.

Test All Sizes

Verify your custom controls work correctly at all five size levels (XS, S, M, L, XL).

Get Started

Core Concepts

Components

Advanced Features

Guides

​Overview

Control Heights

Font Sizes

Corner Radius

Padding

Spacing

Border Thickness

​Implementation

​How It Works

​Ensuring Tokens at Startup

​Programmatic Access

​Available Helper Methods

​Token Reference

​Control Heights

​Floating Input Heights

​Font Sizes

​Primary Font Sizes

​Secondary Font Sizes

​Tertiary Font Sizes

​Section Header Font Sizes

​Header Font Sizes

​Corner Radius

​Padding

​Button Padding

​Input Padding

​Tab Padding

​Badge Tokens

​Card Padding

​Spacing

​Border Thickness

​Checkbox/Radio Indicator Sizes

​Checkmark Icon Sizes

​Radio Inner Dot Sizes

​Toggle Switch Sizes

​Toggle Knob Sizes

​Progress Bar Heights

​Progress Corner Radius

​Avatar Sizes

​Making Custom Controls Token-Aware

​Pattern 1: Use DaisyResourceLookup (Recommended)

​Pattern 2: Read from ResourceDictionary with Fallback

​Controls Using Tokens

​Best Practices

Use Token Helpers

Respect Size Property

Provide Fallbacks

Test All Sizes

Build docs developers (and LLMs) love

Overview

Implementation

How It Works

Ensuring Tokens at Startup

Programmatic Access

Available Helper Methods

Token Reference

Control Heights

Floating Input Heights

Font Sizes

Primary Font Sizes

Secondary Font Sizes

Tertiary Font Sizes

Section Header Font Sizes

Header Font Sizes

Corner Radius

Padding

Button Padding

Input Padding

Tab Padding

Badge Tokens

Card Padding

Spacing

Border Thickness

Checkbox/Radio Indicator Sizes

Checkmark Icon Sizes

Radio Inner Dot Sizes

Toggle Switch Sizes

Toggle Knob Sizes

Progress Bar Heights

Progress Corner Radius

Avatar Sizes

Making Custom Controls Token-Aware

Pattern 1: Use DaisyResourceLookup (Recommended)

Pattern 2: Read from ResourceDictionary with Fallback

Controls Using Tokens

Best Practices