Skip to content

SAIL_UI_REFERENCE.md

Latest commit

 

History

History
157 lines (130 loc) · 2.82 KB

SAIL_UI_REFERENCE.md

File metadata and controls

157 lines (130 loc) · 2.82 KB

Sail UI Reference Guide

This document serves as a quick reference for using the sail_ui design system components correctly.

Text Components

SailText

Do NOT use:

SailText.primary16()  // ❌ Wrong
SailText.secondary16() // ❌ Wrong

Instead use:

SailText.primary12(    // ✅ Correct
  'Your text',
)

SailText.secondary12(  // ✅ Correct
  'Your text',
)

Icons

SailSVGAsset Available Icons

Common icons available in sail_ui:

  • SailSVGAsset.iconHome - Home/Overview
  • SailSVGAsset.iconWallet - Wallet management
  • SailSVGAsset.iconTools - Developer tools/utilities
  • SailSVGAsset.iconTabSettings - Settings/Configuration
  • SailSVGAsset.iconSend - Send/Receive/Transfer
  • SailSVGAsset.iconSidechains - Sidechains/Network
  • SailSVGAsset.iconCoins - Coins/Balance
  • SailSVGAsset.dividerDot - Dot separator

Usage:

QtTab(
  icon: SailSVGAsset.iconHome,
  label: 'Home',
  active: true,
)

Theme Usage

Colors

Access through SailTheme:

final theme = SailTheme.of(context);

// Background colors
theme.colors.background
theme.colors.backgroundSecondary

// Text colors
theme.colors.primary
theme.colors.secondary

// Status colors
theme.colors.green
theme.colors.red
theme.colors.orange

Spacing

Use SailStyleValues for consistent spacing:

SailStyleValues.padding04  // 4.0
SailStyleValues.padding08  // 8.0
SailStyleValues.padding12  // 12.0
SailStyleValues.padding16  // 16.0
SailStyleValues.padding20  // 20.0

Common Components

Navigation Tabs

QtTab(
  icon: SailSVGAsset.iconHome,
  label: 'Overview',
  active: tabsRouter.activeIndex == 0,
  onTap: () => tabsRouter.setActiveIndex(0),
)

Theme Toggle

const ToggleThemeButton()

Best Practices

  1. Always get theme from context:
final theme = SailTheme.of(context);
  1. Use SailText with proper size:
SailText.primary12(
  'Title',
)
  1. Use proper color properties:
color: theme.colors.primary  // ✅ Correct
color: theme.colors.textPrimary  // ❌ Wrong
  1. Use SailStyleValues for spacing:
padding: EdgeInsets.all(SailStyleValues.padding16)  // ✅ Correct
padding: EdgeInsets.all(16)  // ❌ Avoid magic numbers

Common Patterns

Status Bar

For status bars and info text:

SailText.secondary12('Status: Connected')

Headers

For section headers:

SailText.primary12('Section Title')

Navigation

For navigation labels:

QtTab(
  icon: SailSVGAsset.iconHome,
  label: 'Overview',
  active: tabsRouter.activeIndex == 0,
)

Gradients

For gradient backgrounds:

decoration: BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [
      theme.colors.background,
      theme.colors.backgroundSecondary,
    ],
  ),
),