README

LazFluid — Fluent 2 UI Components for Lazarus/LCL

A Free Pascal / Lazarus component library implementing Fluent 2 (Microsoft's Fluent UI v9) styled controls with Light/Dark theme support, anti-aliased rendering via BGRABitmap, and hover animations.

Components

Non-visual Components

Supporting Units

Features

• Theme System: Light/Dark mode with automatic Windows system detection (ftmSystem)
• Design Tokens: Full Fluent 2 semantic token set (colors, radii, spacing, typography)
• Anti-aliased Rendering: Uses BGRABitmap for smooth rounded corners, focus rings, and compound borders
• Hover Animations: ~150ms linear transitions on state changes via 16ms timer
• Live Re-theming: Change accent color or theme mode at runtime — all controls update instantly via listener system
• DPI Scaling: Controls scale automatically for high-DPI displays
• IDE Integration: Components appear under a "Fluent" tab in the Lazarus IDE palette
• Keyboard Support: Focus rings, Alt+letter menu hotkeys, F2 inline rename in tree view
• Optional Reordering: Tabs and key-value rows can be drag-reordered via opt-in properties and cancelable events

Dependencies

• LCL (built-in with Lazarus)
• BGRABitmap — install via Lazarus Online Package Manager (OPM)

Installation

1. Install BGRABitmap

Open Lazarus IDE → Package → Online Package Manager → Search "BGRABitmap" → Install

2. Compile Runtime Package

Open packages/lazfluid_rt.lpk in Lazarus → Click Compile (do not install — it's a runtime package)

3. Install Designtime Package

Open packages/lazfluid_dt.lpk in Lazarus → Click Use > Install → Lazarus rebuilds the IDE with the new components

4. Run the Demo

Open demo/FluentDemo.lpi → Press F9 to compile and run

CLI Build

C:\lazarus\lazbuild.exe packages/lazfluid_rt.lpk
C:\lazarus\lazbuild.exe packages/lazfluid_dt.lpk
C:\lazarus\lazbuild.exe demo/FluentDemo.lpi

Package compile order matters: lazfluid_rt must compile before lazfluid_dt.

Project Structure

lazfluid/
????????? src/                          # All control source units
???   ????????? FluentControl.pas         # Base control class
???   ????????? FluentTheme.pas           # Theme manager, tokens, palettes
???   ????????? FluentTypes.pas           # Shared enums/types
???   ????????? FluentDrawing.pas         # BGRABitmap drawing helpers
???   ????????? FluentThemeAdapter.pas    # TFluentFormThemer
???   ????????? FluentButton.pas
???   ????????? FluentTextBox.pas
???   ????????? FluentCheckBox.pas
???   ????????? FluentRadioButton.pas
???   ????????? FluentDropDown.pas
???   ????????? FluentScrollBar.pas
???   ????????? FluentProgressBar.pas
???   ????????? FluentListBox.pas
???   ????????? FluentTabBar.pas
???   ????????? FluentMenu.pas            # MenuBar + PopupMenu + MenuPopup
???   ????????? FluentStatusBar.pas
???   ????????? FluentHeaderBar.pas
???   ????????? FluentPanel.pas           # ScrollPanel
???   ????????? FluentTreeView.pas
???   ????????? FluentCodeEditor.pas
???   ????????? FluentKeyValueGrid.pas
???   ????????? FluentHighlighter.pas     # Base highlighter
???   ????????? FluentJSONHL.pas
???   ????????? FluentCSSHL.pas
???   ????????? FluentHTMLHL.pas
???   ????????? FluentXMLHL.pas
????????? packages/                     # Lazarus package descriptors
???   ????????? lazfluid_rt.lpk           # Runtime package
???   ????????? lazfluid_rt.pas
???   ????????? lazfluid_dt.lpk           # Designtime package
???   ????????? lazfluid_dt.pas
???   ????????? register_lazfluid.pas     # IDE component registration
????????? demo/                         # Demo app
???   ????????? FluentDemo.lpi
???   ????????? FluentDemo.lpr
???   ????????? MainForm.pas
???   ????????? MainForm.lfm
????????? restlab/                      # Violin RestLab (MIT-licensed demo app)
???   ????????? ViolinRestLab.lpi
???   ????????? ViolinRestLab.lpr
???   ????????? MainFormUnit.pas
???   ????????? MainFormUnit.lfm
???   ????????? RequestFrame.pas
???   ????????? RequestFrame.lfm
???   ????????? AboutForm.pas
???   ????????? AboutForm.lfm
???   ????????? RequestModel.pas
???   ????????? HttpExecutor.pas
???   ????????? CollectionIO.pas
???   ????????? OSDarkThemeManager.pas
???   ????????? LICENSE                   # MIT
???   ????????? appdesc.md
????????? LICENSE                       # LGPL-2.1+exception (library)
????????? COPYING.LGPL.txt
????????? COPYING.modifiedLGPL.txt
????????? AGENTS.md

Usage Example

uses FluentButton, FluentTheme, FluentTypes;

// Create a primary button
var Btn := TFluentButton.Create(Self);
Btn.Parent := Self;
Btn.Caption := 'Click Me';
Btn.Appearance := fbaPrimary;
Btn.Size := fbsMedium;

// Toggle theme
FluentThemeMgr.Mode := ftmDark;

// Change accent color
FluentThemeMgr.AccentColor := $107C10;

Theme API

// Access the singleton
FluentThemeMgr.Mode := ftmLight;    // ftmLight, ftmDark, ftmSystem
FluentThemeMgr.AccentColor := $0F6BD;

// Read current tokens
var BgColor := FluentThemeMgr.Tokens.ColorNeutralBackground1;

// Read the resolved theme after ftmSystem is applied
var DarkChrome := FluentThemeMgr.IsDark;
var ActualMode := FluentThemeMgr.ResolvedMode; // ftmLight or ftmDark

// Listen for changes
FluentThemeMgr.AddListener(@MyHandler);

Design Tokens

The theme system provides Fluent 2 semantic tokens:

• Backgrounds: ColorNeutralBackground1..3, ColorSubtleBackground*
• Foregrounds: ColorNeutralForeground1..4, ColorNeutralForegroundOnBrand
• Strokes: ColorNeutralStroke1..2, ColorNeutralStrokeAccessible
• Brand: ColorBrandBackground, ColorBrandBackgroundHover/Pressed, ColorBrandForeground
• Focus: ColorStrokeFocus1 (outer), ColorStrokeFocus2 (inner)
• Radii: RadiusSmall=2, RadiusMedium=4, RadiusLarge=8
• Font Sizes: FontSizeCaption=12, FontSizeBody=14, FontSizeSubtitle=20

Notes

• BGRABitmap is required for anti-aliased rendering. Without it, corners would appear jagged.
• The controls intentionally look like Windows Fluent UI on all platforms.
• TFluentTextBox uses an internal TEdit for text input handling (IME, clipboard, caret).
• TFluentButton supports dialog button behavior through ModalResult, Default, and Cancel.
• TFluentCodeEditor is a custom-painted code editor — not a wrapper around a native widget.
• TFluentCodeEditor, TFluentListBox, TFluentTreeView, and TFluentKeyValueGrid expose ShowBorder; disabling the code editor border also suppresses its focus ring.
• TFluentTabBar.AllowReorder enables tab drag reordering with OnTabReorder / OnTabReordered; TFluentKeyValueGrid.AllowRowReorder enables row drag reordering with OnRowReorder / OnRowReordered.
• Animations use simple timer-based linear interpolation (~150ms). Reveal/acrylic effects are not implemented.
• On Windows, ftmSystem mode reads HKCU\Software\Microsoft\Windows\CurrentVersion\Themes\Personalize\AppsUseLightTheme. On other platforms it defaults to Light.
• Popup forms (dropdown, menu) send WM_NCACTIVATE(TRUE) to the owner form on Windows so the title bar stays visually active.

License

• LazFluid component library (src/, packages/, demo/): LGPL-2.1-or-later with linking exception — see LICENSE. The exception allows proprietary applications to use LazFluid components without being subject to the LGPL copyleft, matching the approach used by the Lazarus LCL itself.
• Violin RestLab (restlab/): MIT — see restlab/LICENSE.

This library uses BGRABitmap, distributed under the same modified LGPL license.