Fluent 2: a first pass at an updated default theme - #21771
Draft
MikeCodesDotNET wants to merge 29 commits into
Draft
Fluent 2: a first pass at an updated default theme#21771MikeCodesDotNET wants to merge 29 commits into
MikeCodesDotNET wants to merge 29 commits into
Conversation
Verbatim copy of the v1 Fluent theme renamed to Fluent2Theme / Avalonia.Themes.Fluent2, as the starting point for the Fluent 2 (WinUI 3 visual language) re-skin. No visual changes in this commit. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Fluent2ColorPalette.xaml: full *FillColor*/*StrokeColor* color ramp from WinUI 3 1.5.2 (via Uno), variant roles swapped to Avalonia convention (Default=Light, Dark=Dark) - Fluent2TokenResources.xaml: token brushes, elevation gradient borders (ControlElevationBorderBrush et al, absolute 3px/2px endpoints with per-variant scaleY(-1) flips), acrylic solid fallbacks, animation constants - Shape/metric defaults: ControlCornerRadius 4, OverlayCornerRadius 8, ButtonPadding 11,5,11,6, TextControlThemePadding 10,5,6,6, focused text border 1,1,1,2 - SystemAccentColors: WinUI static shade values when no OS accent is set - Focus visual: WinUI double ring (FocusStrokeColorOuter/Inner), rounded, drawn 3px outside control bounds Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Button: ControlFillColor* fills, gradient elevation border, radius 4, padding 11,5,11,6, BackgroundSizing Inner/OuterBorderEdge, 83ms background cross-fade; press-scale removed (WinUI communicates press via fill only) - TextBox: ControlFillColorDefault/Secondary/InputActive fills, hairline elevation border, focused 1,1,1,2 accent bottom underline - CheckBox: WinUI token aliases (71 keys re-pointed), strong-stroke unchecked box, accent fill checked, MinWidth 120, padding 8,5,0,0 Verified on headless Skia renders in both variants: elevation gradient anchors correctly (light: strong edge bottom; dark: strong edge top), accent underline on focus, black-on-accent dark glyphs. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- tests/Avalonia.Themes.Fluent2.UnitTests: the drop-in contract as tests. The live v1 theme is the baseline: every enumerated v1 resource key must resolve in Fluent2Theme in both variants with a compatible runtime type; all implicit ControlThemes present with matching TargetType; palette accent flows into WinUI accent tokens; compact density key set preserved; every themed control instantiates, lays out and renders headlessly in both variants - ControlCatalog: Fluent2 entry in the theme switcher for v1/v2 A/B testing - nuke RunCoreLibsTests runs the new test project Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
ColorPaletteResources now answers for the nearest Fluent 2 token colors when legacy palette colors are set (RegionColor -> SolidBackgroundFillColor*, BaseHigh/MediumHigh/Medium -> TextFillColor* with per-variant token alphas, BaseLow -> ControlFillColor*, ErrorText -> SystemFillColorCritical, ChromeMedium -> SolidBackgroundFillColorQuarternary), so v1-era palette customization keeps driving the new visuals. Heuristic by design; exact control is overriding the token keys directly. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
RepeatButton, ToggleButton (checked = accent w/ OuterBorderEdge sizing), HyperlinkButton (no underline, accent text), DropDownButton, RadioButton (12/14/10px glyph grow-shrink, accent elevation ring), ToggleSwitch (12->14px knob grow, pressed stretch, 167ms spline slide), SelectableTextBlock, DataValidationErrors (SystemFillColorCritical + flyout chrome), ButtonSpinner (NumberBox spin buttons + focus-within field treatment), NumericUpDown (corner filtering against spinner strip), SplitButton (single overlay elevation border + divider), Slider (22px thumb w/ inner accent ellipse size states, 4px track), ProgressBar (3px bar, WinUI two-segment indeterminate sweep), AutoCompleteBox (flyout chrome tokens). Shared resources: WinUI values for ProgressBarThemeMinHeight (3), SliderTrackThemeHeight (4), AutoComplete flyout brushes, error brush -> SystemFillColorCritical; new RadioButtonCheckGlyphStrokeChecked* and ToggleSwitchFillOffDisabled aliases. All 8 audit tests green; verified light+dark headless renders. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- ScrollBar: 12px rail, 6px rounded thumb collapsing to 2px (outer edge pinned), 167ms spline expand with 100ms delay; ScrollViewer choreography - Popup chrome recipe: flyouts r8 + SurfaceStrokeColorFlyout + acrylic fallback; ToolTip stays r4 with WinUI 9,6,9,8 padding - ListBoxItem/ComboBoxItem: WinUI selection pills (3x16 accent, 167ms height animation, hidden when unselected), SubtleFill states, 40px rows, backplate insets; ComboBox elevation border + dropdown chrome; editable mode without focus underline - Menu cluster: rounded 4,2-margin flyout items, 24px chevron gutter, 40px MenuBar with 10,4 pill items, DividerStrokeColorDefault separators, WinUI flyout insets - TreeViewItem: rounded rows + selection pill + secondary chevron; TabItem/ TabStripItem as WinUI Pivot headers (3px rounded accent pipe, SubtleFill hover, verified 24px SemiLight headers) - Expander: card idiom refinements (12px chevron, InnerBorderEdge), Card* token re-points; SplitView: SolidBackgroundFillColorBase pane, overlay panes round their free edge with flyout stroke; PipsPager WinUI metrics - Audit fix: Expander/scroll aliases that are Color-typed in v1 now alias token colors, preserving the resource-type contract (caught by Test A) All 8 audit tests green; verified light+dark headless renders. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- DateTimePickerShared: looping-selector items on the Fluent2 rounded backplate, accent selection pill behind the selected row with on-accent text, 34px acrylic-fallback up/down chevron buttons fading in on hover, WinUI accept/dismiss button bar - DatePicker/TimePicker: TextBox-like closed fields (elevation hairline, radius 4), rounded accent highlight in the flyout, WinUI margins; fixes v1 gap where TimePicker items never used the picker item theme - Calendar cluster: WinUI 3 circular day items (today = filled accent circle, selected = accent ring, ring-and-dot when both), month/year rounded items, subtle-fill header/nav chevrons with divider, r8 chrome - CalendarDatePicker: elevation-border field + flyout chrome - Shared: Date/TimePickerFlyoutPresenterHighlightFill -> accent, CalendarViewOutOfScope* -> Fluent2 tokens All 8 audit tests green; verified light+dark renders. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Window/EmbeddableControlRoot: SolidBackgroundFillColorBase canvas - WindowDrawnDecorations: Windows 11 caption buttons (46x32, subtle fills, red close hover #C42B1C with white glyph), 10px glyphs, hairline frame - NotificationCard as WinUI InfoBar: r4 card, severity background tints + 16px severity badges, subtle close button; notification manager spacing - CommandBar: transparent rest / acrylic-fallback open state per WinUI, AppBarButton subtle pills with accent-checked toggles, WinUI separators - Mobile pages: SolidBackgroundFillColorBaseAlt bars with dividers, 40px subtle back button, SmokeFillColorDefault drawer scrim, 3px accent tab indicator; TextSelectionHandle accent recolor - Label/HeaderedContentControl typography; GroupBox converted to the card idiom; GridSplitter subtle hover; RefreshVisualizer accent spinner - ManagedFileChooser re-tokened (layer sidebar, divider rules) - Compact density re-derived against WinUI 3 base metrics; adds ListBoxItemMinHeight 24 so compact lists actually shrink All 8 audit tests green; verified light+dark headless renders. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
When the theme is materialized as a deferred keyed resource (as ControlCatalog declares it in App.xaml) the Window ControlTheme's Background styled setter never resolves its DynamicResource, leaving the white transparency fallback visible under semi-transparent page layers — dark mode composited to light gray. Inner controls were unaffected because template-level DynamicResource resolves through the visual tree. Add a canvas border in the window template that paints SolidBackgroundFillColorBaseBrush via the tree-anchored path; a user-set Background still paints over it via the existing TemplateBinding border. The styled-setter anomaly itself is an Avalonia core issue to investigate. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
PlatformColorValues gains six optional accent shade slots (AccentColorDark1-3/Light1-3); the Win32 backend fills them from the UISettings object it already holds, and SystemAccentColors prefers them over HSL-computed shades, so the palette matches Windows exactly. CheckBox/RadioButton no longer force WinUI's 120px MinWidth (v1 never had it); 8px trailing padding compensates, and the CheckBoxMinWidth/ RadioButtonMinWidth resources stay as override knobs. Both changes follow FluentAvalonia's (MIT) lead. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…content ListBoxItem/ComboBoxItem/TreeViewItem selection pills now scale in with a TransformOperationsTransition (167ms, fast-out-slow-in) instead of a layout- invalidating Height animation; TreeViewItem's pill was previously static. Expander content gets the pragmatic 250ms CrossFade via ContentTransition (WinUI's height reveal isn't expressible in XAML). Techniques from FluentAvalonia (MIT). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…anguages A LocalizedStringsProvider resolves the DatePicker/TimePicker field-name keys and Cut/Copy/Paste flyout keys against CultureInfo.CurrentUICulture, walking the culture hierarchy and falling back to the invariant English resources. Data generated from Unicode CLDR dateFields display names (Unicode-3.0) and microsoft-ui-xaml's CommandBarFlyout resources (MIT); regeneration script included. ManagedFileChooser strings stay English-only. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
A new Home page (first in the drawer) modeled on the Accelerate demo dashboard: a gradient hero banner with floating control glyphs animated via keyframed TranslateTransforms, followed by categorized card sections for every catalog page. Cards carry an icon badge, title and one-line description, and clicking one navigates via SelectedPageIndex so the drawer selection stays in sync. PageItem gains Description/Category and the view model exposes grouped HomeSections plus NavigateToPageCommand. Card colors are self-contained theme dictionaries so the page works across Fluent/Fluent2/Simple in both variants. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ome page Replaces the gradient/glyph hero with a 1:1 copy of AvaloniaProDemo's DashboardView banner: banner-bg backdrop, the four 3D logos floating at the original positions/durations, and the centered Avalonia wordmark. Assets copied from the Accelerate repo (~4.8 MB of PNGs). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The catalog now starts under Fluent2; v1 Fluent and Simple remain available from the settings drawer as before. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Member
Author
|
Some screenshots. 
|
maxkatz6
reviewed
Jul 13, 2026
maxkatz6
marked this pull request as draft
August 28, 2026 03:36
# Conflicts: # samples/ControlCatalog/Assets/Icon.png # samples/ControlCatalog/Assets/banner-bg.png # samples/ControlCatalog/Assets/logo1.png # samples/ControlCatalog/Assets/logo2.png # samples/ControlCatalog/Assets/logo3.png # samples/ControlCatalog/Assets/logo4.png # samples/ControlCatalog/Pages/HomePage.xaml # samples/ControlCatalog/Pages/HomePage.xaml.cs # samples/ControlCatalog/ViewModels/MainWindowViewModel.cs # samples/ControlCatalog/ViewModels/MainWindowViewModel_PageList.cs
This reverts part of the commit 71bbc90.
maxkatz6
force-pushed
the
themes/fluent2
branch
from
August 28, 2026 03:49
cc22247 to
134817f
Compare
7 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fluent 2: a first pass at an updated default theme
This PR introduces Avalonia.Themes.Fluent2, a first pass at bringing Avalonia's Fluent theme up to the Fluent 2 / WinUI 3 visual language — the design system Microsoft shipped with Windows 11 - built as a drop-in replacement for
Avalonia.Themes.Fluent.The theme
The new theme is a ground-up re-skin on top of the full WinUI 3 token system(reference: WinUI 1.5.2 resource dictionaries), covering every control in the existing Fluent theme: rounded corners, gradient elevation borders, subtle selection with animated accent pills, slim auto-hiding scrollbars, WinUI motion timings, and light/dark variants.
Compatibility is the headline constraint: every v1 resource key still resolves with a compatible type, template part names and pseudo-classes are unchanged, and the
Palettes/DensityStyleAPIs keep working — swapping<FluentTheme />for<Fluent2Theme />is intended to be the whole migration. A dedicated testsuite enforces this contract against the live v1 theme (key parity across both variants, implicit ControlTheme coverage, palette semantics, and a render smoke test over every themed control).
Beyond the visual port, the theme picks up fidelity and desktop-ergonomics improvements informed by a comparison against FluentAvalonia (MIT): true OS-provided accent shades on Windows, WinUI's forced 120px CheckBox/RadioButton MinWidth deliberately dropped, and localized DatePicker/TimePicker/text-flyout
strings for ~85 languages (sourced from Unicode CLDR and the WinUI repo).
Core library additions
A handful of small features were added to the core library in support:
PlatformColorValuesnow carries optional OS accent shades (AccentColorDark1–3/AccentColorLight1–3), and the Win32 backend populates them fromUISettings— so themes can match the Windows accent palette exactly instead of approximating it.ControlCatalog
The catalog gained a dashboard-style home page — an animated hero banner with categorized, clickable cards for every page, each with an icon and short description — and now defaults to Fluent2 (v1 Fluent and Simple remain switchable at runtime), so every catalog page exercises the drop-in contract by default.
Known limitations (documented in the theme README)
Acrylic/Mica ship as their solid fallback colors, there's no HighContrast variant yet (matching v1; scoped as follow-up work), and TabControl maps to the WinUI Pivot look rather than TabView.
Note
I'm mostly throwing this over the fence and don't intend to drive it to merging. If the team is interested, let's make it happen. If we're not, I'm not precious about it.