Documentation
¶
Overview ¶
Package fluent provides a Microsoft Fluent Design System theme.
Fluent Design uses an accent color to derive a consistent color scheme with subtle depth cues, clean typography, and restrained rounded corners. The default accent color is Windows Blue (#0078D4), but it can be customized to match any brand.
Creating a Theme ¶
Create a theme from an accent color:
t := fluent.NewTheme(fluent.WithAccentColor(widget.Hex(0x0078D4))) primary := t.Colors.Primary
Or use defaults:
lightTheme := fluent.NewTheme() // light mode darkTheme := fluent.NewDarkTheme() // dark mode
Design Characteristics ¶
- Accent color: Windows Blue (#0078D4) by default, customizable
- Rounded corners: 4px default (smaller than Material 3)
- Shadows: Subtle elevation with lighter shadow values
- Typography: Segoe UI-like metrics using Inter font
- Focus: Inner focus ring style
Component Painters ¶
The package provides painter implementations for all core widgets:
- ButtonPainter implements button.Painter
- CheckboxPainter implements checkbox.Painter
- RadioPainter implements radio.Painter
- TextFieldPainter implements textfield.Painter
- DropdownPainter implements dropdown.Painter
- SliderPainter implements slider.Painter
- DialogPainter implements dialog.Painter
- ScrollbarPainter implements scrollview.Painter
- TabViewPainter implements tabview.Painter
Example:
btn := button.New(
button.Text("Submit"),
button.PainterOpt(fluent.ButtonPainter{Theme: fluentTheme}),
)
Index ¶
- Variables
- type BadgePainter
- type ButtonPainter
- func (ButtonPainter) ButtonFontSize(size button.Size) float32
- func (ButtonPainter) ButtonHeight(size button.Size) float32
- func (ButtonPainter) ButtonPadding(size button.Size) (float32, float32)
- func (ButtonPainter) ButtonRadius() float32
- func (p ButtonPainter) PaintButton(canvas widget.Canvas, state button.PaintState)
- type CheckboxPainter
- type ChipPainter
- type ColorScheme
- type DialogPainter
- type DropdownPainter
- type Option
- type RadioPainter
- type ScrollbarPainter
- type SliderPainter
- type TabViewPainter
- type TextFieldPainter
- func (TextFieldPainter) ContentPadding() (float32, float32)
- func (p TextFieldPainter) PaintTextField(canvas widget.Canvas, st *textfield.PaintState)
- func (TextFieldPainter) TextFieldCornerRadius() float32
- func (TextFieldPainter) TextFieldCursorWidth() float32
- func (TextFieldPainter) TextFieldFontSize() float32
- type Theme
Constants ¶
This section is empty.
Variables ¶
var DefaultAccentColor = widget.Hex(0x0078D4)
DefaultAccentColor is the standard Windows Blue accent color.
Functions ¶
This section is empty.
Types ¶
type BadgePainter ¶ added in v0.1.35
type BadgePainter struct {
Theme *Theme // nil uses default Fluent fallback
}
BadgePainter renders badges using Fluent Design tokens. Fluent badges use the accent color for the background with onAccent text, following the Microsoft Fluent Design notification badge pattern.
If Theme is nil, BadgePainter falls back to the default Fluent (Windows Blue) palette.
func (BadgePainter) PaintBadge ¶ added in v0.1.35
func (p BadgePainter) PaintBadge(canvas widget.Canvas, ps badge.PaintState)
PaintBadge renders a badge according to Fluent Design specifications. It delegates to the core badge.DefaultPainter with Fluent-derived colors.
type ButtonPainter ¶
type ButtonPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
ButtonPainter renders buttons using Fluent Design tokens. It maps button variants (Filled/Accent, Outlined/Standard, TextOnly/Subtle, Tonal) to the Fluent color scheme.
If Theme is nil, ButtonPainter falls back to the default Fluent Blue palette.
func (ButtonPainter) ButtonFontSize ¶ added in v0.1.37
func (ButtonPainter) ButtonFontSize(size button.Size) float32
ButtonFontSize returns the Fluent font size for the given button size.
func (ButtonPainter) ButtonHeight ¶ added in v0.1.37
func (ButtonPainter) ButtonHeight(size button.Size) float32
ButtonHeight returns the Fluent height for the given button size.
func (ButtonPainter) ButtonPadding ¶ added in v0.1.37
func (ButtonPainter) ButtonPadding(size button.Size) (float32, float32)
ButtonPadding returns the Fluent horizontal and vertical padding.
func (ButtonPainter) ButtonRadius ¶ added in v0.1.37
func (ButtonPainter) ButtonRadius() float32
ButtonRadius returns the Fluent default corner radius.
func (ButtonPainter) PaintButton ¶
func (p ButtonPainter) PaintButton(canvas widget.Canvas, state button.PaintState)
PaintButton renders a button according to Fluent Design specifications.
type CheckboxPainter ¶
type CheckboxPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
CheckboxPainter renders checkboxes using Fluent Design tokens.
If Theme is nil, CheckboxPainter falls back to the default Fluent Blue palette.
func (CheckboxPainter) CheckboxBoxSize ¶ added in v0.1.37
func (CheckboxPainter) CheckboxBoxSize() float32
CheckboxBoxSize returns the Fluent checkbox box size.
func (CheckboxPainter) CheckboxFontSize ¶ added in v0.1.37
func (CheckboxPainter) CheckboxFontSize() float32
CheckboxFontSize returns the Fluent label font size.
func (CheckboxPainter) CheckboxLabelGap ¶ added in v0.1.37
func (CheckboxPainter) CheckboxLabelGap() float32
CheckboxLabelGap returns the Fluent gap between box and label.
func (CheckboxPainter) PaintCheckbox ¶
func (p CheckboxPainter) PaintCheckbox(canvas widget.Canvas, state checkbox.PaintState)
PaintCheckbox renders a checkbox according to Fluent Design specifications.
type ChipPainter ¶ added in v0.1.35
type ChipPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
ChipPainter renders chips using Fluent Design tokens. It maps chip states to the Fluent color scheme: accent color for the selected state, subtle stroke for the unselected outline.
If Theme is nil, ChipPainter falls back to the default Fluent Blue palette.
func (ChipPainter) ChipFontSize ¶ added in v0.1.37
func (ChipPainter) ChipFontSize() float32
ChipFontSize returns the Fluent chip font size.
func (ChipPainter) ChipMinWidth ¶ added in v0.1.37
func (ChipPainter) ChipMinWidth() float32
ChipMinWidth returns the Fluent minimum chip width.
func (ChipPainter) ChipPadding ¶ added in v0.1.37
func (ChipPainter) ChipPadding() float32
ChipPadding returns the Fluent chip horizontal padding.
func (ChipPainter) ChipRadius ¶ added in v0.1.37
func (ChipPainter) ChipRadius() float32
ChipRadius returns the Fluent chip corner radius.
func (ChipPainter) PaintChip ¶ added in v0.1.35
func (p ChipPainter) PaintChip(canvas widget.Canvas, state chip.PaintState)
PaintChip renders a chip according to Fluent Design specifications. It resolves Fluent color tokens into a chip.ChipColorScheme and delegates to chip.DefaultPainter for consistent rendering across design systems.
type ColorScheme ¶
type ColorScheme struct {
// Accent group: brand color and variants.
Accent widget.Color
AccentHover widget.Color
AccentPress widget.Color
OnAccent widget.Color
AccentLight widget.Color // lighter accent for subtle backgrounds
AccentDark widget.Color // darker accent for emphasis
// Surface group: neutral backgrounds.
Surface widget.Color
SurfaceSecondary widget.Color // slightly different surface (cards)
SurfaceTertiary widget.Color // input field backgrounds
OnSurface widget.Color // primary text
OnSurfaceSecond widget.Color // secondary text (dimmer)
// Stroke group: borders and outlines.
StrokeDefault widget.Color // control borders
StrokeFocus widget.Color // focused control borders
StrokeDisable widget.Color // disabled borders
// Fill group: control backgrounds.
FillDefault widget.Color // standard control fill
FillSecond widget.Color // secondary fill (hover)
FillTertiary widget.Color // tertiary fill (pressed)
FillDisable widget.Color // disabled fill
// Semantic colors.
Error widget.Color
Warning widget.Color
Success widget.Color
// Overlay and shadow.
Backdrop widget.Color
Shadow widget.Color
}
ColorScheme holds all Fluent Design color roles.
Fluent Design organizes colors around an accent color with neutral surface tones. Light mode uses white/gray backgrounds with dark text, while dark mode uses dark gray backgrounds (#1F1F1F, #2D2D2D) with light text.
func DarkScheme ¶
func DarkScheme(accent widget.Color) ColorScheme
DarkScheme generates a Fluent Design dark color scheme from an accent color.
func LightScheme ¶
func LightScheme(accent widget.Color) ColorScheme
LightScheme generates a Fluent Design light color scheme from an accent color.
type DialogPainter ¶
type DialogPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
DialogPainter renders dialogs using Fluent Design tokens. Fluent dialogs have a clean surface with subtle border and smaller corner radius compared to Material 3.
If Theme is nil, DialogPainter falls back to the default Fluent Blue palette.
func (DialogPainter) DialogMaxWidth ¶ added in v0.1.37
func (DialogPainter) DialogMaxWidth() float32
DialogMaxWidth returns the Fluent default maximum dialog width.
func (DialogPainter) DialogPadding ¶ added in v0.1.37
func (DialogPainter) DialogPadding() float32
DialogPadding returns the Fluent dialog padding.
func (DialogPainter) DialogTitleHeight ¶ added in v0.1.37
func (DialogPainter) DialogTitleHeight() float32
DialogTitleHeight returns the Fluent dialog title height.
func (DialogPainter) PaintDialog ¶
func (p DialogPainter) PaintDialog(canvas widget.Canvas, ps dialog.PaintState)
PaintDialog renders a dialog according to Fluent Design specifications.
type DropdownPainter ¶
type DropdownPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
DropdownPainter renders dropdowns using Fluent Design tokens.
If Theme is nil, DropdownPainter falls back to the default Fluent Blue palette.
func (DropdownPainter) PaintMenu ¶
func (p DropdownPainter) PaintMenu(canvas widget.Canvas, st *dropdown.MenuPaintState)
PaintMenu renders a dropdown menu according to Fluent Design specifications.
func (DropdownPainter) PaintTrigger ¶
func (p DropdownPainter) PaintTrigger(canvas widget.Canvas, st *dropdown.TriggerPaintState)
PaintTrigger renders a dropdown trigger according to Fluent Design specifications.
type Option ¶
type Option func(*themeConfig)
Option configures a Fluent theme.
func WithAccentColor ¶
WithAccentColor sets the accent color for the Fluent theme. If not provided, the default Windows Blue (#0078D4) is used.
type RadioPainter ¶
type RadioPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
RadioPainter renders radio items using Fluent Design tokens.
If Theme is nil, RadioPainter falls back to the default Fluent Blue palette.
func (RadioPainter) PaintRadio ¶
func (p RadioPainter) PaintRadio(canvas widget.Canvas, state radio.PaintState)
PaintRadio renders a radio item according to Fluent Design specifications.
func (RadioPainter) RadioCircleRadius ¶ added in v0.1.37
func (RadioPainter) RadioCircleRadius() float32
RadioCircleRadius returns the Fluent outer circle radius.
func (RadioPainter) RadioFontSize ¶ added in v0.1.37
func (RadioPainter) RadioFontSize() float32
RadioFontSize returns the Fluent label font size.
func (RadioPainter) RadioItemPadding ¶ added in v0.1.37
func (RadioPainter) RadioItemPadding() float32
RadioItemPadding returns the Fluent radio item padding.
func (RadioPainter) RadioLabelGap ¶ added in v0.1.37
func (RadioPainter) RadioLabelGap() float32
RadioLabelGap returns the Fluent gap between circle and label.
type ScrollbarPainter ¶
type ScrollbarPainter struct {
Theme *Theme // nil uses default Fluent fallback
}
ScrollbarPainter renders scrollbars using Fluent Design tokens. Fluent scrollbars are thin and subtle, appearing on hover.
If Theme is nil, ScrollbarPainter falls back to the default Fluent scrollbar palette.
func (ScrollbarPainter) PaintScrollbar ¶
func (p ScrollbarPainter) PaintScrollbar(canvas widget.Canvas, ps scrollview.PaintState)
PaintScrollbar renders scrollbars according to Fluent Design specifications.
type SliderPainter ¶
type SliderPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
SliderPainter renders sliders using Fluent Design tokens.
If Theme is nil, SliderPainter falls back to the default Fluent Blue palette.
func (SliderPainter) PaintSlider ¶
func (p SliderPainter) PaintSlider(canvas widget.Canvas, ps slider.PaintState)
PaintSlider renders a slider according to Fluent Design specifications.
func (SliderPainter) SliderThumbRadius ¶ added in v0.1.37
func (SliderPainter) SliderThumbRadius() float32
SliderThumbRadius returns the Fluent thumb radius.
func (SliderPainter) SliderTrackHeight ¶ added in v0.1.37
func (SliderPainter) SliderTrackHeight() float32
SliderTrackHeight returns the Fluent track height.
type TabViewPainter ¶
type TabViewPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
TabViewPainter renders tab bars using Fluent Design tokens. Fluent tabs have a subtle selected indicator and clean typography.
If Theme is nil, TabViewPainter falls back to the default Fluent Blue palette.
func (TabViewPainter) PaintTabBar ¶
func (p TabViewPainter) PaintTabBar(canvas widget.Canvas, ps tabview.PaintState)
PaintTabBar renders a tab bar according to Fluent Design specifications.
type TextFieldPainter ¶
type TextFieldPainter struct {
Theme *Theme // nil uses default Fluent Blue fallback
}
TextFieldPainter renders text fields using Fluent Design tokens. Fluent text fields feature a subtle bottom accent border on focus and clean rectangular shape with small corner radius.
TextFieldPainter implements textfield.LayoutMetrics to provide Fluent spatial metrics (14px font, 12/8px padding, 1.5px cursor) used by the widget to compute pre-computed PaintState fields.
If Theme is nil, TextFieldPainter falls back to the default Fluent Blue palette.
func (TextFieldPainter) ContentPadding ¶ added in v0.1.37
func (TextFieldPainter) ContentPadding() (float32, float32)
ContentPadding returns the Fluent horizontal and vertical padding.
func (TextFieldPainter) PaintTextField ¶
func (p TextFieldPainter) PaintTextField(canvas widget.Canvas, st *textfield.PaintState)
PaintTextField renders a text field according to Fluent Design specifications. Cursor and selection positions come from pre-computed PaintState fields.
func (TextFieldPainter) TextFieldCornerRadius ¶ added in v0.1.37
func (TextFieldPainter) TextFieldCornerRadius() float32
TextFieldCornerRadius returns the Fluent corner radius.
func (TextFieldPainter) TextFieldCursorWidth ¶ added in v0.1.37
func (TextFieldPainter) TextFieldCursorWidth() float32
TextFieldCursorWidth returns the Fluent cursor width.
func (TextFieldPainter) TextFieldFontSize ¶ added in v0.1.37
func (TextFieldPainter) TextFieldFontSize() float32
TextFieldFontSize returns the Fluent font size.
type Theme ¶
type Theme struct {
// Colors holds the Fluent Design color scheme derived from the accent color.
Colors ColorScheme
// contains filtered or unexported fields
}
Theme provides Fluent Design System design tokens.
A Theme contains the complete set of design tokens needed to style a Fluent Design application: colors (derived from an accent color), and references to the shared theme.Theme for typography, spacing, shadows, and radii.
Create a theme with NewTheme or NewDarkTheme:
t := fluent.NewTheme() // default light t := fluent.NewTheme(fluent.WithAccentColor(widget.Hex(0x744DA9))) // custom accent dark := fluent.NewDarkTheme() // default dark
func NewDarkTheme ¶
NewDarkTheme creates a Fluent Design dark theme.
By default it uses Windows Blue (#0078D4) as the accent color. Use WithAccentColor to customize.
func NewTheme ¶
NewTheme creates a Fluent Design light theme.
By default it uses Windows Blue (#0078D4) as the accent color. Use WithAccentColor to customize:
t := fluent.NewTheme(fluent.WithAccentColor(widget.Hex(0x744DA9)))
func (*Theme) AsTheme ¶
AsTheme converts the Fluent theme to a theme.Theme for use with the generic theme system. This maps Fluent color roles to the shared ColorPalette structure.
Source Files